728x90 HTML&CSS48 [CSS] 배경 고정한 채로 스크롤 움직이기 background-attachment ? - background-attachment 가 배경 이미지 스크롤 시에도 고정시키는 효과 - scroll(기본값) : 배경이미지가 스크롤 시 페이지와 함께 스크롤 처리 - fixed : 배경이미지가 스크롤 시 페이지와는 다르게 고정처리 background-attachment: fixed; HTML fixed01,fixed02 div태그에 배경이미지 고정하기 ! CSS *{ padding: 0; margin: 0; } header{ width: 100%; height: 100px; background-color: pink; } footer{ width: 100%; height: 100px; background-color: #333; } main{ width: 10.. 2023. 12. 5. [HTML] meta 태그 viewport 설정, 문법 viewport ? -현재 display에 보여지고 있는 영역 - PC 환경에서 브라우저의 크기를 줄이면 웹페이지의 내용이 다 안 보이고 스크롤 해서 봐야 되는 경우가 있는데, 이때 보여지는 부분이 viewport 영역이다 태그 안에 태그 활용하여 작성한다. meta 태그의 content 값에 설정값들을 추가해 모바일 기기에서 렌더링되는 영역,뷰포트 크기,줌 레벨을 조절할 수 있다. width=divice-width 하여 전체 웹 페이지의 width 가 기기 너비만큼 설정되고 @media에 선언된 width 범위에 따라 css 적용되어 반응형 웹을 만든다. 1. width - viewport 가로크기 조정, divice-width는 100% 스케일에서 CSS 픽셀들로 계산된 화면의 폭을 의미 2. hei.. 2023. 9. 26. [CSS] 반응형 디바이스 크기별로 width 설정 디바이스별로 화면 크기가 달라 px 단위로 된 것을 % 로 설정해야 디바이스 크기에 따라 줄어들고 늘어날 수 있다. % 기준점은 %를 설정하려는 선택자의 상위 부모 선택자를 px 값으로 고정값 주고 그것을 기준으로 %로 변경하는 것이다. html 디바이스별 크기 setting 또리 봄이 주인 강아지 화면1 화면2 화면3 화면4 CSS body{ width: 412px; background-color: tomato; margin: 0; padding: 0; border: 0; } header{ width: 100%; background-color: skyblue; } .top>h3{ display: inline-block; } .top>button{ display: inline-block; } .nav>d.. 2023. 9. 25. [HTML5] 웹접근성 tabindex 초점 이동 초점 이동 ? - 스크린 리더 사용자가 키보드를 통해서 웹 페이지 정보에 접근하는 것 ( 스크린 리더 : 컴퓨터나 모바일 화면의 텍스트를 TTS를 통해 읽어주는 소프트웨어, 일반적으로 시각장애인이 눈으로 보는 대신 소리로 들으며 화면의 정보를 이해하는데 사용) - tab 키로 좌측상단부터 포커스 이동, shift + tab 키는 반대로 올라감 초점 받는 태그 ? - 기본적으로 초점을 받는 태그 : , , , , 가 있다. a 클릭 시 페이지 이동시켜주는 링크 태그 button 버튼 태그 input 사용자가 값을 입력할 수 있는 입력 요소들 태그 select 여러 옵션 값 중 하나 선택하는 태그 (multiple 사용시 여러개 선택 가능) textarea 여러 줄 입력 상자 태그 tabindex ? - 키.. 2023. 9. 24. [CSS] img 가운데 정렬하기 1. text-align 2. vertical-align 3. margin left/right: auto text-align img는 inline속성으로 텍스트처럼 다뤄져 text-align으로 조절 가능하다. 의 부모 태그 에 text-align:center 속성을 적용하면 이미지 가운데 정렬이 된다. vertical-align vertical-align은 inline이나 inline-block만 사용 가능한데 img 태그는 inline 속성이기 때문에 vertical-aline을 사용할 수 있다. 또 img 태그는 다른 inline 태그와 다른 점이 크기 조절이 가능하다는 것이다. (inline-block과 비슷하다.) vertical-align: top/middle/bottom img{ vertic.. 2023. 9. 15. [HTML] a 태그로 이메일,전화번호 링크 걸기 웹 페이지에 이메일 주소나 전화번호를 넣고 싶을 때 a 태그를 사용한다. 이메일 링크 걸기 : mailto: 이메일 주소 앞에 mailto:를 href에 넣어주면 이메일을 작성할 수 있도록 링크가 생성되어 클릭하면 이동이 가능하다. 이메일 주소를 클릭했을 때 microsoft outlook이 열리면서 이메일을 보내는 창이 뜨게 된다. 받는 사람 주소에 링크를 건 이메일 주소가 들어가 있음을 확인할 수 있다. ddorybom email mailto: 란? Mailto 링크는 전자 메일을 보내기 위해 컴퓨터의 기본 메일 클라이언트를 활성화하는 HTML 링크 유형입니다. 여러개의 주소 지정도 가능하다. send email 전화번호 링크 걸기 : tel: tel을 이용해 전화번호 링크를 걸 수 있다. 모바일웹에.. 2023. 9. 13. [HTML5] figure img figcaption 태그 ? figure는 사진, 이미지, 다이어그램 등을 감싸는 시멘틱 태그이다. 이미지를 바로 불러올 수 없고 자식요소로 img태그를 넣어 이미지를 불러온다. 닫는 태그가 필요하다. ? figure 태그의 자식요소이다. 제일 처음 또는 제일 마지막에 위치시킨다. figure 요소 안에서의 콘텐츠에 대한 제목을 출력한다. 예시 figure 사용 예시 img의 title 속성은 이미지 위에 마우스 포인터를 가져다 대었을 때 나타나는 풍선 도움말 문구이다. img ? img 태그는 imgage의 줄임말로써 이미지를 삽입해주는 태그다. 반드시 src라는 속성을 동반하며 이 src에 이미지 경로를 작성하면 정상적으로 출력된다. 태그는 꼭 사용하지 않아도 된다. 2023. 9. 12. [HTML] input 태그의 disabled 속성 활용하기 태그의 disabled 속성은 해당 요소가 비활성화됨을 명시한다. disabled 속성이 명시된 요소는 사용할 수 없으며, 사용자가 클릭할 수도 없다. 또한, 폼 데이터가 제출될 때도 disabled 속성이 명시된 요소의 데이터는 제출되지 않는다. 따라서 이 속성을 사용하면 특정 조건이 충족될 때까지 사용자가 입력 필드를 클릭할 수 없도록 설정하고, 특정 조건이 충족되면 자바스크립트 등으로 disabled 속성값을 삭제하여 사용자가 입력 필드를 다시 사용할 수 있도록 조절할 수 있다. disabled 속성은 불리언(boolean) 속성이다. 불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 된다. 이름 : 학번 : 학과 : .. 2023. 8. 22. [favicon] favicon 만들어 적용하기 파비콘? favicon은 favorites + icon. 의 합성어, 즐겨찾기 아이콘이다. 인터넷 웹브라우저 주소창에 표시되는 웹사이트를 대표하는 탭, 즐겨찾기 아이콘으로 16x16 32x32 48x48 64x64 128x128 등의 사이즈, 8비트, 24비트, 32비트 색상으로 용량과 사이즈가 작은 파일로 제작할 수 있다. 파비콘을 지정하지 않으면 기본으로 지구본 아이콘으로 보여지게 된다. 모바일 파비콘 핸드폰으로 웹사이트를 홈화면으로 추가할 때도 파비콘이 쓰인다. 2. 파비콘 확장자 특이한 점은 jpg, png 와 같이 흔히 보는 확장자와는 다르다. 파일명.ico 로 제공된다. 3. 파비콘 만드는 방법 png나 jpg등으로 파비콘으로 쓸 아이콘을 만든 후 파비콘 생성기 2023. 8. 10. [CSS]반응형 웹 사이트 / 적응형 웹 사이트 차이? 1. 반응형 웹사이트 :: Response Website 하나의 템플릿(Templete)로 모바일, 태블릿, 데스크탑 모든 기기에 대응할 수 있는 웹이다. 반응형 웹은 해상도 별로 보여질 화면을 꼼꼼하게 정의해야 돼서 초기 기획 단계에서 많은 시간이 든다. 마크업 작업을 할 때 고정된 px값이 아닌 em, rem, % 처럼 백분율 값으로 작업해야 한다. 하나의 템플릿으로 만드는 작업이라 미디어쿼리(Media Queries)를 사용해서 해상도, 디바이스 등 특정 화면에 따라 레이아웃을 변경한다. 2020년 6월 기준 유튜브 웹사이트에 들어가보니 반응형으로 되어 있네요! 2. 적응형 웹사이트 :: Adaptive Website 모바일용, 데스크탑 등 각각의 디바이스 별로 독립적인 템플릿(Templete)를 .. 2023. 8. 9. 이전 1 2 3 4 5 다음 728x90
