두번째 수업에는 주로 CSS 에 대해 배우고 실습을 진행하였다.
솔직히 프로젝트를 여러개 진행해보면서
CSS는 식은 죽 먹기 아니야? 하고 가볍게 수업에 임했는데
이런 나자신을 반성하게 되는 수업이 됐다...
CSS 선택자 적는것도 생각보다 룰이 까다로웠고(지금까지 대충 클래스 남발해서 적음)
지금까지 css가 가끔씩 적용이 안될때가 있었는데 그것이 css 우선순위 때문임을 깨달았으며
css 상속이나 변수를 활용하는 것에 있어 아직 나는 주니어구나...^^ 하는 깨달음....
일단 2일차에 새롭게 배운 내용들을 블로그에 기록해보려고 한다!
학습내용
- <img> 태그
- css 우선순위
- css 선택자
- 폰트(상속 및 변수 활용)
- 반응형 레이아웃
- 수업 때 질문들 Q&A
1. <img> 태그
<img>태그는 단독으로 쓰는 것보다, <div>태그와 함께 감싸서 쓰는 것이 좋다.
<div>태그를 사용하면 이미지의 레이아웃을 더 정밀하게 제어할 수 있고,
반응형 디자인을 구현할때 배치 및 정렬 등
크기와 위치를 유연하게 조정할 수 있기 때문이다.
2. css 우선순위
기본적으로, 밑에 있는 코드일수록 더 우선순위를 가진다.
중복요소가 있을경우에, 더 밑에 작성된 css가 적용되는 것이다.
외부 css를 가져오는 <link> 들은 <head>부분의 <link>들 하단에 작성해줄수록,
다른 파일들과 스타일이 중복되더라도 내가 만든 스타일을 우선 적용시킬 수 있다.
또한 스타일을 입히는 방식에는 .css파일로 import를 하거나,
인라인 방식으로 태그에 직접작성하거나,
<head>부분의 <style>로 html파일 안에 작성해주는 방법 등 여러가지가 있지만
다른 어떤 방법보다 인라인 방식으로 태그에 직접 "style = "" " 방식으로 적용해주는
css의 우선순위가 가장 높다.
뒤에서 css 선택자 설명을 하면서 css 선택자 점수에 따라 우선순위가 또 다른데
이건 바로 다음에 다시 설명하겠습니다~
3. css 선택자
css 선택자를 적용하는 방식은 다음과 같다.
- 띄어쓰기 : 자식으로 있을때 ex) .container .list
- '>' : 내 직계자식만 처리하고 싶을 때 사용한다. 만약에 2depth 메뉴 헤더를 작성하는 경우, <ul>과 <li>를 2번 작성하게 된다. 이때 부모 컨테이너 바로 밑의 바깥 ul을 선택하고 싶으면 다음과 같이 사용한다.
.container > ul- 붙여작성하기 : 구분 편의상 2개의 클래스를 사용하고 그걸 가지고 올때 사용한다.
// HTML
<div class="listCon con"></div>
// CSS
.listCon.con- '+' : 인접형제를 선택할때 사용하는 인접형제선택자이다.(next sibling) 인접 형제 하나만 가지고 온다.
- '~' : 다음 형제 모두를 가지고 올때 사용한다.('+'는 1개만, '~'는 다음 형제 전부)
- :active : 클릭을 하는 동안의 스타일 적용
- :focus : tab키로 접근했을때 스타일 적용
그리고 웹사이트에서 요소의 적용된 스타일을 직접 확인하고 싶을때,
개발자모드(F12)를 통해 적용된 css 우선순위 확인이 가능하다.
또한, 가끔 내가 모르는 우선순위때문에 내가 적용한 스타일이 적용 안될때가 있는데
이때는 적용 스타일 끝에 !important를 이용하여 가장 우선적으로 적용되도록 만들어줄 수도 있다.
하지만 이 방식은 정말 모르겠거나 개발이 급할때 사용하는 방식이어서
되도록 지양해주는 것이 좋다.(나중에 또 어 왜안돼지? 가능성 농후)
또한 같은 요소라 하더라도
상속관계나 형제관계에 따라 다양한 방식으로 css 선택자를 적어줄 수 있다.
이때 css 선택자에 클래스나 태그들 이름을 길게 적어줄수록
css 점수(=우선순위) 가 높아져서
더 먼저 스타일이 반영된다.
그래서 가끔씩 작성한 스타일이 적용이 안될때에는
1. 개발자모드에서 css 우선순위를 확인해보고
2. 내가 적용하고자 하는 스타일의 선택자 점수를 높여주면 된다!!
(아니면 !important 사용하거나..)
4. 폰트(상속 및 변수 활용)
css에서 폰트는 보통 root에 적용시켜준다.
ex ) :root { ~~~ }
특히 폰트 적용시 글자 크기나 색상을 root에 같이 작성해주는데,
이때 변수를 만들어서 다른 선택자에서 변수 이용도 가능하다.( var (변수이름) )
:root{
--mcolor1: red;
}
.container{
color: var(--mcolor);
}
폰트는 px 보다는 상대단위( em, rem, %)로 사이즈를 명시해주며
같은 em이더라도 상속받은 부모 폰트 사이즈에 따라 실제 크기는 언제든지 달라질 수 있다.
사이즈 단위인 em 과 rem의 차이에 대해서 궁금해져서 찾아보았다.
em은 기준이 현재 요소의 폰트 크기고
rem은 최상위 요소(보통 <html> 또는 <body>)의 폰트 크기이다.
( 예를들어 최상위 요소의 폰트 크기가 16px인 경우, 어떤 요소의 폰트 크기를 2rem으로 지정하면
해당 요소의 폰트 크기는 32px이 된다.)
em은 부모 요소의 폰트 크기를 기준으로 상대적인 크기를 계산하기 때문에
em 단위가 중첩되면 폰트 크기가 누적되어 주의가 필요하다.
실습때 지켜본 결과
패딩이나 마진, 폰트 크기등 보통 강사님은 rem단위를 많이 사용하시는 것 같았다.
아무래도 rem은 중첩된 요소에서도 항상 루트 요소의 폰트 크기를 기준으로 하므로,
폰트 크기가 예측 가능하고 일관되니까 일지 싶다.
5. 반응형 레이아웃
반응형은 각 기기별로 너비 breakpoint를 잘 잡아주면 된다.
강사님의 설명으로는
~800px : 모바일
800~1100px : 탭
1100px ~ :PC
로 잡는게 일반적이라고 하셨다.
사실 디테일하게 따지면 1의단위까지 따지는 걸로 아는데
구체적인 breakpoint 수치는 필요할때 찾아보면 될것같다.
@media (max-width : x)를 사용하여
x 자리에 breakpoint를 활용한다.
6. 수업때 했던 Q&A
Q : style태그와 분리된 stylesheet 사이에도 우선순위 관계가 있나요?
A: 우선 순위는 아래와 같습니다.1. 인라인 스타일 2. 내부 스타일 (internal style) 3. 외부 스타일 (external style)
Q : CSS 의사 클래스가 JS 이벤트 핸들러로 처리하는 것보다 성능적으로 우수한가요?
A: JS 이벤트 핸들러로 처리하면 렌더링이 완료된 후에 DOM을 다시 수정해야 하기 때문에 가능하면 CSS로 처리하는 하는 것을 추천드립니다.
디자인과 관련된 부분이라면 JS로 처리하는 것보다 CSS로 처리하는 것이 직관적이기도 하구요.
Q : ul 하위에 li 구조로 버튼을 표현하면 스크린리더 사용자 등에게 클릭할 수 있는 요소라는 걸 어떻게 표현할 수 있나요?
A: ARIA 속성을 추가하면 스크린리더 사용자가 해당 요소를 버튼으로 인식할 수 있습니다.
Q : SEO 관점(검색 엔진 최적화)에서 로고에 h1태그를 사용하는것이 괜찮나요?
h1태그를 해당 페이지의 제목이라는 개념으로 가지고 있다보니a 태그로 로고이미지만 붙이는 것이 개인적으로 어색하게 느껴집니다.
A: SEO 관점이므로 h1 태그를 사용하는 것이 좋습니다. 아니면 제목은 보이지 않되, css적으로 배경이나 가상요소로 이미지를 처리해줄 수도 있습니다.
2일차 내용은 주로 CSS 위주였는데
내가 기본기가 얼마나 부족했는지 실습을 하면서 css 선택자를 적는 연습때 애를 먹었었다.
반드시 직계자식('>')으로 처리해야할 때와 아닐때도 있고,
실제로 에밋을 자주 활용할 일은 없겠지만 에밋으로 간단하게 HTML을 구성할 수 있고,
강사님과 보조강사님과의 Q&A를 통해 성능적인 고민도 해보니
한 층 더 발전한 느낌이 들었다.
'TIL(Today I Learn)' 카테고리의 다른 글
| [데브코스 FE] 2주차 두번째 수업 2024/07/23 (0) | 2024.07.26 |
|---|---|
| [데브코스 FE] 2주차 첫번째 수업 2024/07/22 (2) | 2024.07.25 |
| [데브코스 FE] 1주차 네번째 수업 2024/07/19 (3) | 2024.07.24 |
| [데브코스 FE] 1주차 세번째 수업 2024/07/18 (2) | 2024.07.22 |
| [데브코스 FE] 1주차 첫번째 수업 2024/07/16 (1) | 2024.07.21 |