프론트엔드 개발/HTML, CSS - 이론 썸네일형 리스트형 [HTML 심화] div 태그의 용도에 따른 이름. 은 모두 div 태그와 기능이 동일하고 이름만 다를 뿐이다. 아무 기능도 없는 해당 태그들을 div 대신 쓰는 이유는 다음과 같다. 1. div를 남발할 시, 가독성이 떨어져 유지보수가 어렵다. 2. 해당 태그들을 쓰면 검색엔진이 정보의 종류를 파악할 때 도움이 된다. 3. 스크린 리더로 읽는 분들이 읽기 훨씬 수월해 진다. 그럼 각 태그들이 어떨 때 쓰이는 지 알아보자. 페이지 전체나 특정 구획의 제목 역할을 하는 요소들을 두는데 사용된다. ex- 로고, 제목, 검색창 링크가 들어가는 요소가 들어가는 태그 ex- 색인, 페이지 메뉴들 페이지 전체에서 혹은 특정 구획의 최하단에 뭐 적을 때 해당 태그를 이용함 ex- 페이지의 주요 내용이 들어가는 곳으로 페이지마다 꼭 하나여야만 한다. 사이드 바 같은 거.. 더보기 [HTML 심화] 모두가 이용할 수 있는 웹사이트 모두가 이용할 수 있는 웹사이트를 만들어야 한다. 모두가 이용할 수 있다는 소리는 저시력 시각 장애인, 지체 장애인 분들도 이용하기가 수월해야한다는 것이다. 시각 장애인 분들은 스크린의 내용을 읽을때 스크린 리더기를 사용한다. 1. 이미지에 대한 주석을 alt로 달아놓자. (1) 주석이 짧을 때 스크린 리더기로 읽힐 내용은 해당 태그에 속성 alt를 덧붙여서 개발자가 설정할 수 있다. 그냥 의미 없거나, 읽을 필요가 없는 이미지에도 alt를 써줘야 한다. 왜냐하면 alt가 없다면 스크린 리더가 이미지 소스 이름을 그대로 읽어버리기 때문이다. 이때는 아무 의미 없는 내용이므로 alt에 공백을 쓴다. 그러면 스크린 리더도 안 읽고 지나간다. (2) 주석이 길때 이미지에 대한 주석이 길 때는 주석 내용을 일반.. 더보기 [HTML 심화] 상단의 태그들 뜯어보기 우리가 vs code 에서 html 을 작성할 때, 처음에 !치고 tab 누르면 뜨는 내용들이 있다. 우리는 항상 body 내부를 채우는데 집중했었는데, 이번에는 위에 뜨는 메타 데이터들이 무슨 뜻을 하는지 알아보겠다. 1. 기본 메타데이터 (1) 해당 html 문서가 최신 버전의 html인 HTML5를 쓰고 있음을 나타냄. (2) Head 태그들 (1) charset="UTF-8"은 해당 html을 어떤 해독기로 번역해야 하는지 브라우저에게 알려주는 것이다. utf-8로 인코딩 된 문서를 다른 해독기로 번역하면 문자가 다 깨져서 나온다. (2) 두번째 줄 내용은 혹시 윈도우 익스플로러로 열람시 어떤 모드로 실행할 것인지에 대한 내용이다. (3) 3번째 줄은 viewport 관련 내용이다. viewpor.. 더보기 [CSS] Flex layout 1. 부모요소에서 설정해줘야 할 것 display: flex; /* 부모요소에 flex로 설정하면, 자식 요소들의 크기 위치를 자유자재로 바꿀 수 있게 된다. 자식 요소 사용에 대한 유연성이 주어진다. */ flex-direction: row /*column, row-reverse,column-reverse*/ /* 자식 요소들이 배열될 기준을 정한다. row로 하면, 왼위에서 오른쪽으로(가로축) 쭉 나열, column으로 하면 위에서 아래로(세로축) 쭉 나열 reverse는 각각 오른쪽에서 왼쪽, 아래에서 위로 여기서 main 축은 해당 요소가 정한 기준이고, 수직 축은 그에 반대되는 축이다. 예를 들어 row이면 main 축은 가로이고 수직 축은 column이다.*/ flex-wrap: wrap or.. 더보기 [CSS] 요소 감추는 방법 1. 커서 cursor: auto; /* auto: 상황에 맞게 자동 변화 근데 이게 내가 원하지 않는 것일 수 있음 주의 default: 그냥 무조건 화살표 none: 커서 안 보임 zoom-in: 돋보기 pointer: 손가락으로 바뀜. not-allowed: 금지 표시 나옴. 그 외 more... mdn 문서 확인 바람 */ 2. 요소 감추는 법 opacity: 1; visibility: hidden; display: none; /* opacity: 불투명도 1 == 잘 보임 (100%), 0 == 안 보임 (0%) opacity: 0; 이 되면 모습만 감추는 것이기 때문에 해당 태그에 커스터마이징 했던 커서 모양 바뀜, 클릭, 포커스(input 요소가 선택된 것) 전부 다 됨. visibility.. 더보기 [CSS] 포지셔닝 1. position (1) 정의 요소들이 화면에 어떻게 배치될 것인지 지정하는 속성 이 속성은 자식 요소에게 대물림되지 않는다. (font-size: 2em 이 되어있으면 자식 요소들의 폰트 크기는 대를 거듭할수록 복리로 커졌었다.) ** top, bottom,left,right : 기준점에서 얼마 만큼 떨어졌는가를 나타낸다. (top = 25px 기준 점에서 25px 만큼 내려갔다. bottom = 30px 기준 점에서 30px 올라갔다. left = 80px 기준 점에서 80px 만큼 오른쪽으로 갔다. right = 40px 기준 점에서 45px 만큼 왼쪽으로 갔다. ) (2) 속성 ㄱ. static 기본값, 전적으로 페이지 흐름을 따른다. top, bottom, left,right,z-index .. 더보기 [CSS] 배경 꾸미기 1. 이미지를 배경에 사용하기 (1) 배경에 이미지 넣기 background-image: url(이미지의 상대 or 절대 주소); (2) 배경 이미지 반복 background-repeat: repeat; /*속성 (default는 repeat) no-repeat, repeat-x, repeat-y, space(이미지들이 띄엄띄엄 반복) round(반복되는 이미지가 짤리지 않고, 이쁘게 반복되도록, 이미지 찌그러지지 않는 선에서 크기 변화해서 반복) 속성 2개 반복해서 쓸 수 있음 그러면 첫 번째 속성은 가로에만 적용, 두 번째 속성은 세로에만 적용 */ (3) 배경 이미지 위치 background-position: top; /*위치 2개 반복 가능(top left -> 좌상단), center는 중앙 퍼센.. 더보기 [CSS] 박스 모델 2 1. border block 요소의 테두리를 뜻함. /* border: 굵기 선모양 색깔 ex- boder: 2px solid black border: 1.5vmin dotted darkorange*/ /*border-top, bottom,left,right 각각 하나씩 설정도 가능.*/ 2. box-sizing box-sizing: content-box; /*box의 너비는 border와 padding 값을 뺀 순수 글의 너비로 설정되고, border와 padding 값은 그 위에 얹어 진다. ex) width: 440px이면, 글의 너비가 440px가 되고, border와 padding 값은 440px이라는 박스 크기에 +alpha가 된다.*/ box-sizing: border-box; /*box의 .. 더보기 이전 1 2 3 4 다음
