Wecode 1주차 사전스터디 HTML/CSS로 자기소개 페이지 구현하기
🙋HTML/CSS 스터디 과정에서의 MISSION🙆
- Navigation bar를 자기소개 페이지 상단에 추가하고, 스크롤을 내려도 고정되도록 효과를 주세요
- Navigation bar에 메뉴를 클릭할 때 색상이 바뀌도록 css 효과를 주세요
1. CSS란?
웹 페이지의 스타일(형식)을 한 문서에 정리하여 각각의 웹 페이지 전체의 일관성을 유지할 수 있고 작업 시간을 단축시켜주며 유지·보수를 간편하게 해주는 '스타일시트' 라고 한다.
2.상대경로와 절대경로
※상대 경로와 절대 경로의 개념이 확실치 않으면 프로그래밍하기 까다롭다고 한다.
-
절대경로 : 어떠한 웹 페이지나 파일이 가진 고유 경로를 말한다. 예를 들어 http://wecode.co.kr, C:\Users\user\Desktop\profile\css 등을 모두 절대 경로라고 한다.
-
상대경로 : '현재 위치를 기준'으로 그 곳의 위치'로, html 파일이 위치한 폴더를 기준으로 상대적인 경로라는 것, 예를 들어
첫번째 가정
C:\Users\user\Desktop\profile 폴더를 기준으로 css 파일을 가져온다고 가정,
현재의 내가 js 폴더에 위치한다면 '../css/main.css'가 된다.두번째 가정
index.html이 C:\profile에 위치한다면,
profile은 ./ > C:는 ../가 된다.
3. 선택자(Selector)
- HTML로 뼈대를 구성했다면 CSS로 비주얼을 입혀줘야 한다. 선택자란, HTML의 태그들에 이름을 만들어 스타일시트로 제어하는 역할을 하며, CSS뿐만 아니라 javascript 등에도 쓰인다.
(1) 선택자 우선순위
!important > html inline style > ID Selector > Class > Type > *(전체 선택자)
- 우선순위의 우위는 선택자의 종류와 수에 따라 결정되며, 높은 우선순위의 선택자를 더 많이 사용할 수록 우선순위가 된다.
- !important는 되도록 안 쓰는게 좋다. !important를 남용할 수록 코드는 꼬이고 유지·보수가 힘들어지기 때문.
(2) ID와 Class
- ID 선택자는 #을 붙여 작성한다. → #defaultOpen
- Class 선택자는 .을 붙여 작성한다. → .contant
(3) 선택자 결합
- 자손(Descendant) 결합자 (A B)
- 자식(Child) 결합자 (A > B)
- 인접 형제(Adjacent sibling) 결합자 (A + B)
- 일반 형제(General sibling) 결합자 (A ~ B)
1. 선택자 A B
<!--div 안에 있는 모든 p 태그 예시)-->
<style>
div p {color:#333;}
</style>
<div>
<p>develog</p>
</div>
<!--이 경우 div 안에 있는 모든 p 태그의 색이 #333으로 변경된다.-->
2. 선택자 A > B
<!--div class 'code' 안에 있는 p 태그 예시)-->
<style>
code > p {color:#333;}
</style>
<div class="code">
<p>develog</p>
</div>
<div>
<p>velog</p>
</div<
> <!--이 경우 div class 'code' 안에 있는 모든 p 태그의 색이 #333으로 변경된다.-->3. 선택자 A + B
<!--div의 형제 p를 선택하는 예시)-->
<style>
div + p {background-color:pink;}
</style>
<div class="code">
<div>develog</div>
<p>velog</p>
</div>
> <!--이 경우 div의 형제 중 처음 나타나는 p태그를 선택하여 bg가 핑크색으로 변경된다.-->4. 선택자 A ~ B
<!--div의 형제 p를 모두 선택하는 예시)-->
<style>
div ~ p {background-color:pink;}
</style>
<div class="code">
<div>develog</div>
<p>velog</p>
</div>
> <!--이 경우 div의 형제 p 태그의 모든 배경색은 핑크색으로 변경된다.-->4. Position & Display
Position의 자주 쓰는 속성 종류
1. static : 모든 태그들의 default값
2. relative : 기존의 static default 위치를 기준으로 top, right, bottom, left 방향으로 이동이 가능하다.
3. absolute : relative가 static default 위치를 기준으로 움직였다면, absolute는 부모의 포지션을 기준으로 움직인다. 예를 들어 부모 태그 중 relative, absolute, fixed인 태그가 없다면 body를 기준으로 움직인다.
4. fixed : 고정 navigation에 많이 쓰이는 속성이다. fixed를 쓸 경우 헤더가 메인 컨텐츠를 가려버리는 경우가 발생하는데, header의 부모인 body 엘리먼트로 부터 독립 되면서 body 엘리먼트에서 점유되고 있던 header의 공간이 사라져 버렸기 때문, 이런 경우 header의 height값 만큼 body에 paddding-top 값을 주면 쉽게 해결된다.
5. sticky : sticky의 엘리먼트는 사용자의 스크롤 위치에 따라 relative와 fixed를 오간다. 자바스크립트 없이 순수 CSS로 구현할 수 있어 편리하지만 IE, 엣지 15 및 이하 버전에서는 sticky를 지원하지 않는다. Safari에서는 -webkit-을 같이 지정해주어야 한다.
- Block 태그
div p h li
blcok은 가로를 모두 채우며, block 뒤에 쓰여지는 태그는 줄 바꿈이 되어 나온다. width, height 값을 지정할 수 있다.
- inline 태그
span b a i
inline은 block과 달리 줄 바꿈이 되지 않고 나오게 된다. width와 height 값을 줄 수 없다.
CSS를 학습하며 정리한 소감
지난 글 HTML 주요 태그 에서 부족하게 정리한 CLASS와 ID를 좀 더 꼼꼼히 정리해서 쓴 것 같아 뿌듯하다.
많은 CSS속성 중 내가 정리한 건 기초와 레이아웃 속성 밖에 없어 아쉽지만, 당장은 비주얼보다 레이아웃을 탄탄히 잡을줄 아는게 우선인 것 같다.
