[포스코 x 코딩온] 풀스택 웹 개발자 부트캠프 1주차 - 3일차 회고⎜CSS
어제는 HTML, 웹 페이지의 뼈대에 대해 배웠다면, 오늘 배운 CSS는 그 뼈대에 살을 붙이는 즉, 디자인을 하기 위한 언어라고 보면 된다.
예시로 네이버 홈페이지에 어떤 코드들이 들어있는지 확인하려면,
1) 네이버 홈페이지(https://www.naver.com/)를 들어간 후
2) 홈페이지 여백에 우클릭 후 검사버튼 클릭을 하면
이런 식으로 나온다(솔직히 이 수업 배우기 전에는 잘못 누르면 나오는 화면이었는데 저게 저런 용도였을지는.... elements에는 해당 페이지가 어떻게 코딩되어 있는지 확인해 볼 수 있기에 좋은 기능인 거 같다.
CSS의 참조 방식에는
1) 인라인방식 - 태그 각각 스타일을 적어줘야 함(겹쳤을 때 이것이 가장 우선순위)
2) 내장 style - <head> 태그 내부에 사용할 style을 <style>태그로 미리 선언하여 사용하는 것
3) 링크 방식 - 모든 style을 하나의 CSS 파일에 넣고, 필요한 HTML파일에 해당 CSS파일을 링크하여 사용하는 것
내가 원하는 스타일을 css파일로 만든 후
내가 작성하고 있는 HTML에 링크만 걸어주면 된다.
(참고로 ./하면 해당 폴더에 있는 파일을 쉽게 찾을 수 있다.)
자 이제 css 작성법에 대해 들어간다.(나는 css파일에 링크를 걸고, 원하는 효과를 css파일에 작성하였다.)
selector{property:property-value;} 이러한 방법으로 나타내면 된다.(연속으로 property를 지정하기 위해선 그 사이에 ; 으로 구분)
1. CSS 선택자 - 기본
∙ 종류 : 전체, 태그, class, id
- 전체 선택자 : 모든 요소를 선택 / * {property:property-value}
- 태그 선택자 : 원하는 태그를 선택 / ex) p {property:property-value}
- class 선택자 : 원하는 class 속성값을 선택 /
- id 선택자 : 원하는 id 속성값을 선택 /
2. CSS선택자 - 복합 / 기본 선택자만으로는 선택이 불가능한 경우에 사용(사실 이 부분 배우면서 집 가서 다시 복습해야겠다는 생각이 들었다..)
∙ 종류 : 일치, 자식, 하위(후손), 인접 형제, 일반 형제
- 일치 선택자 : 선택자 2개를 동시에 만족하는 요소 선택
- 자식 선택자 : 선택자 요소의 자식 요소를 선택
- 하위(후손) 선택자 : 선택자의 하위 요소를 선택, **띄어쓰기 필수**
- 인접 형제 선택자 : 선택자의 다음 형제 요소 하나를 선택
- 일반 형제 선택자 : 선택자의 다음 형제 요소 모두를 선택
3. CSS선택자 - 가상 클래스 / 사용자의 행동에 따라 변화하는 가상 상황, 각 요소의 상황, 특정 요소를 부정할 때 사용
∙ 가상 클래스 선택자, 사용자의 행동에 따라 변화, 요소의 상황, 부정 선택
- hover : 선택자 요소에 마우스 커서가 올라가 있는 동안 선택
- active : 선택자 요소를 마우스를 클릭하고 있는 동안 선택
focus : 선택자 요소가 포커스 되면 선택
- first-child : 선택자가 형제 요소 중 첫 번째라면 선택
- last-child : 선택자가 형제 요소 중 막내라면 선택.
- nth-child(n) : 선택자가 형제 요소중 n번째라면 선택.(필요에 따라 "2n" 혹은 "2n+1"식으로 홀, 짝수로도 사용 가능)
- not : 선택자가 아닌 다른 요소를 선택.
4. CSS선택자 - 가상 요소
- after, before : 선택자 요소의 내부 앞이나 뒤에 내용(content)을 삽입
5. CSS선택자 - 속성
- attr : 속성을 포함한 요소 선택.
- attr=value : 속성을 포함하고 값이 ~~ 인 요소 선택.
오늘 배운 것들은 사실 나 자신이 익숙해져야 한다는 사실을 수업 듣는 도중에 깨달았다. 처음 보는 것들이 많아 개인적으론 오늘 매우 힘든 교육 시간이었다. 오늘 교육받은 것들이 최대한 익숙해지기 위해 수업시간에 받은 pdf 파일을 개인적으로 정리하기보단 블로그에 vscode에는 어떻게 적었었는지, 브라우저에 어떻게 나오는지 기록을 해야 복기할 때 도움이 될 거 같아 위와 같이 회고록을 적었다.
이동 중이거나 짬짬이 시간이 있을 때 내 블로그를 보면서 여러 번 복기한다면 빠르게 내 것이 되지 않을까 싶다.