⏬ 목차
1주차는 float로 레이아웃 배치하는 것에 대해 중점적으로 배웠다.
지금은 flex를 주로 사용하지만 유지보수 할 때, float으로 정렬된 프로젝트들도 있기 때문에 알아야한다.
시멘틱태그가 등장하기 이전에는 <table>, <div> 로 마크업을 많이 했는데 (컨트롤이 편하다는 장점이 있음)
의미론적으로는 아무런 뜻이 없기 때문에 <header> 나 <main> 등의 시멘틱 태그를 사용한다.
1-1. 시멘틱 태그란?
의미론적인 태그.
1-2. 시멘틱 태그 사용시 장점
- 협업에서의 이점
- 직관성
- seo(검색엔진최적화)에서 좋은 점수
- 접근성
⏩ 시멘틱 태그를 써야하는 이유 자세히 보기
[HTML] 시맨틱 태그란? 왜 시맨틱태그를 써야하는가
HTML을 배우게 되면 초반에 접하게 되는 것이 시멘틱 태그인데 "시멘틱태그를 써야한다!"는 이야기는 너무나도 많이 들어봤지만, 정작 왜 사용하는지에 대한 이해가 부족한 것 같아 다시 한 번 정
jwss.tistory.com
1-3. 어디에 사용할지 헷갈리는 시멘틱 태그
<article> : 문서 혹은 요소가 독립적으로 존재할 수 있을 때 사용한다.
<section> : 논리적으로 관계 있는 문서 혹은 요소를 구분할 때 사용한다.
<div> : 요소간 논리적 관계와는 상관없이 요소를 나눠야할 때 사용한다.
1-4. <article> vs <section>
형광펜 표시된 부분은 공통점
<article>
1. 내용이 독립적이다.
2. 하위요소로 제목(h1~h6)을 포함하고 있어야한다.
3. 해당 페이지에서 다른 페이지나 다른 영역에 언제든지 독립적으로 갖다 붙힐 수 있는 영역을 그룹화
4. 사이트 안에서 독립적으로 구분해 배포 / 재사용 할 수 있는 구획에 사용한다.
5. 게시판, 블로그 글, 매거진, 뉴스 기사 등에 사용한다.
6. <header> 요소와 <footer> 요소를 포함하기도 한다.
<section>
1. 논리적으로 관련된 집합체
2. 하위요소로 제목(h1~h6)을 포함하고 있어야한다.
3. <header> 요소와 <footer> 요소를 포함하기도 한다.
서로 관련 있는 내용을 모아놓는 <section> 안에 각각 독립된 내용을 가지는 <article>이 여러 개 들어가는 것은 부자연스러울 수 있다.
<article> 안에 <section>이 들어가는 것이 자연스럽다.
- 콘텐츠가 독립된 자체만으로도 의미가 있는가? ➡ <article> 사용
- 콘텐츠가 주제에 관련된 것인가? ➡ <section> 사용
- 콘텐츠가 각각 의미론적으로 관련이 없는가? ➡ <div> 사용
2. padding vs margin
패딩은 내부 여백, 내 영역
마진은 외부 여백, 내 영역이 아님
3-1. 블록요소 vs 인라인 요소 vs 인라인 블록요소
| 기본 너비값 | 요소 배치 | 너비값, 높이값 | 마진, 패딩 | |
| 블록 요소 | 100% | 수직 배치 | 가질 수 있음 | 가질 수 있음 |
| 인라인 요소 | 콘텐츠 너비값 | 수평 배치 | 가질 수 없음 | 상하마진 가질 수 없음 (좌우마진, 상하좌우 패딩은 가질 수 있음) |
| 인라인 블록요소 | 콘텐츠 너비값 | 수평 배치 | 가질 수 있음 | 가질 수 있음 |
⏩ 블록요소, 인라인요소, 인라인블록요소 차이 자세히 보기
[CSS 기초] 블록 요소(block element) ve 인라인 요소(inline element) vs 인라인 블록 요소 (inline-block element)
HTML의 요소는 블록 요소와 인라인 요소, 인라인블록 요소로 분류된다. 블록 요소 (block element) 기본 너비값이 100% (폼 엘리먼트 제외) 너비값이 100%를 차지하기 때문에 각 요소가 수직으로 쌓인다.
jwss.tistory.com
3-2. 인라인 블록 요소의 여백
(1) 인라인 블록요소 양옆 4px 여백
<span>인라인블록</span>
<span>인라인블록</span>
<span>인라인블록</span>
<span>인라인블록</span>
인라인 블록요소는 내가 간격을 주지 않아도 자동으로 간격이 들어간다. 이것은 줄바꿈 때문에 생기는 것이다.
span 태그 다음 엔터를 치면서 자연스럽게 공간이 생기는데 엔터를 치지 않고 태그를 쭉 이으면
<span>인라인블록</span><span>인라인블록</span><span>인라인블록</span><span>인라인블록</span>
사이 여백이 없어지게 된다.
(2) 인라인 블록요소에 overflow: hidden을 주게 될 경우
display: inline-block 요소에 overflow: hidden을 주게 되면 하단에 여백이 생기는데,
이것은 vertical-align: top / middle / bottom 중 하나를 주면 사라진다.
4. css 명시도 (우선순위)
명시도란 브라우저가 특정 요소와 가장 연관된 속성을 찾는 수단으로, 명시도 점수가 높음에 따라 스타일이 적용되는 우선순위가 높아진다.
- 태그: 1점
- 클래스: 10점
- 가상클래스: 10점
- 아이디: 100점
+ 구조 가상클래스 nth-child
nth-child(n+4) : 4이상
nth-child(-n+4) : 4이하
- 가 붙냐 안붙냐로 이상 이하를 결정한다.
5. css 속성 작성순서
6. 성질을 변하게 만드는 속성
position: fixed / position: absolute / flaot는 적용 시 요소가 인라인블록 요소로 변한다.
즉, 블록요소에 적용한다면 100%를 차지하던 너비가 콘텐츠 너비만큼으로 바뀌고 (너비를 따로 설정하지 않았을 경우)
상하마진을 가질 수 없는 인라인 요소는 너비값, 높이값, 상하마진을 가질 수 있게 된다.
예를 들어, span은 인라인요소기 때문에 너비와 높이를 가질 수 없다.
하지만 position: absolute / position: fixed / float를 주면 인라인블록 요소의 성질을 가지기 때문에 스타일을 적용시킬 수 있다.
7. % 와 px의 차이
%는 기준이 있어야한다. %로 높이를 주고싶다면 부모의 높이가 있을 때 사용 가능.
px의 기준은 윈도우 창이기 때문에 기준이 필요하지 않다.
8. 가운데 배치
- text-align: center는 인라인, 인라인 블록 요소만 가운데로 이동한다. (수평)
- position으로 요소를 가운데 배치할 경우 요소의 왼쪽 상단이 위치의 기준이 되므로, top: 50%; left: 50%; transform: translate(-50%, -50%) 를 해줘야한다. (수평 ,수직)
이미지 비율이 망가지면 img 태그에 objec-fit: cover 사용
9. 리셋 속성 단축 키워드
m0 -> margin:0
p0 -> padding:0
lisn -> list-style: none
tdn -> text-decoration: non
fi -> font inhrit 기본 폰트 설정을 상속받는다.
cri -> color inhrit 본 폰트 컬러를 상속받는다.
lh1 -> line-height: 1; 기본 폰트 사이즈만큼 행간을 설정한다.
maw100p -> max-width: 100%
10. 기타 css 속성 단축 키워드
w100 -> width: 100px
W100p -> width: 100%
h100 -> height: 100px
h100p: -> height: 100%
mb10 -> margin-bottom: 10px
mr10 -> margin-right: 10px
m10-10-10-10 -> margin 10px 10px 10px 10px
m0-a -> margin 0 auto
db -> display: block
di -> display: inline
dib -> display: inline-block
bgc#f00 -> background-color: #f00
tac -> text-align: center
vat -> vertical-align:top
fz50 -> font-size: 50
fwb -> font-weight: bold
lc -> last-child
por -> position: relative
poa -> position: absolute
pof -> position:fixed
t50p -> top:50%
l50p -> left:50%
tftl -> transform:translate(x,y)
tftx -> transform:translateX(x)
tfty -> transform:translateY(y)
bdrs50p -> border-radius: 50%
11. Emmet (Zen Co ding)
ID, CLASS 속성
div#page.section.main
<div id="page" class="section main"></div>
엘리먼트 복제
li*3
<li></li><li></li><li></li>
넘버링 - $ 위치에 값이 1부터 1씩 증가 (1,2,3,4...)
li.item$*3
<li class="item1"></li><li class="item2"></li><li class="item3"></li>
li.item$$$*2
<li class="item001"></li><li class="item002"></li>
텍스트
p>{click}
<p>click</p>
12. vscode 단축키
- alt shift 아래키: 밑으로 복사
- alt 누르고 마우스로 선택: 커서 다중 선택
- 드래그 하고 control + d: 동일한 모양을 다중 선택
- 드래그한 다음, alt + 아래키 : 복사 이동
- shift + w : 태그로 묶기
- control shift p : 설정
🚩 이번 수업으로 알게된 점
- article 태그
국비 수업 때는 section 태그만 줄줄히 쓰고 article 태그를 써 본 적이 없어서 용도를 잘 몰랐었는데 이번 기회에 제대로 알게 됐다.
- 인라인블록 양옆 여백, overflow:hidden 시 생기는 아래여백
인라인블록 양 옆에 생기는 여백은 그냥 인라인블록이 갖는 특성인줄 알았는데 엔터 때문에 생기는 여백이었다니
그리고 인라인블록 요소만 overflow: hidden을 주면 아래에 여백이 생기는데 이걸 vertical-align으로 잡는 것도 처음 알았다.. text-align은 자주 쓰는데에 비해서 vertical-align은 묘하게 쓸 곳이 없네 라고 생각했는데 이런 곳에 쓰는구나.
- 성질을 변하게 만드는 속성
position: absolute / position: fixed를 적용하면 요소가 인라인 블록 성질로 변한다는 건 인터넷 강의를 통해서 알고 있었는데 float도 그런지는 몰랐다. 레이아웃 짜는데 헷갈리게 만드는 3대장 아닐까
- 명시도
명시도에 대해서는 처음 들어봤다. 대충 셀렉터 우선순위가 있는건 알았는데 이걸 따로 명시도라고 부르는 명칭이 따로 있다는걸 알게됐다.
- 빠른 코딩방법
시안 보고 이걸 15분 내에 친다는걸 듣고 이게 되나? 했는데 속성 단축 키워드나 에밋을 활용하니 이게 된다. 신기하네..
속성 단축 키워드는 이제 어느 정도 익숙해진 것 같은데 에밋이나 vscode 단축키 같은 건 좀 더 익숙해져야 할 것 같다.
7분에 쳤다는 사람도 있다던데 그 사람 손가락이 스무개인거 아닌지
첫 수업이라 아는 내용도 많아서 따라갈만 했는데 나중 수업이 얼마나 하드할지 어렴풋이 보여서 살짝 걱정 됐다.
확실히 수업 속도가 빠르고 국비 수업에 비해서 중요한 요소, 실무에 필요한 요소 쏙쏙 골라서 수업에 압축 시킨 느낌이다. 수업을 녹화로 다시 볼 수 있기도 하고 정리된 노션 글도 있어서 체계적이라고 느꼈다. 나만 잘하면 되겠다^^ㅜ..........
'강의 정리 > 퍼블리싱 수업' 카테고리의 다른 글
| 4주차: 디자인 시안으로 코딩하기 (2) | 2022.12.29 |
|---|---|
| 2주차: flex, grid (0) | 2022.12.11 |