4/27 (수) CSS 기초

 

○ CSS란?

 

• Cascading Style Sheets
  • cascading ? css에서 작성하는 코드가 폭포같이 이어지기 때문
• 웹페이지를 꾸미려고 작성하는 코드
• 프로그래밍 언어도 마크업 언어도 아닌 Style Sheet 언어
• HTML 요소들에 선택적으로 스타일을 적용할 수 있음

 

 

 

 

 

○ HTML에 CSS 연결하기

 

• html 문서 head에 <link rel="stylesheet" href="파일이름.css" /> 입력
• html과 css를 같은 폴더에 저장한 경우 파일 이름만 작성, 경로가 다르면 경로 입력해야함
• css 파일을 따로 작성하지 않고 html 문서에 속성 부여할 수도 있지만 관심사 분리 측면에서 권장되지 않음
• 관심사 분리?
  • 관심사는 코드에 영향을 미치는 정보 집단
  • 코드에 조건이나 기능들이 추가되면 코드가 길어져서 가독성이 떨어짐
  • 관심사들은 따로 작성해서 분리하는 것이 좋은 코드

 

 

 

○ CSS 기본 구조

 

 

셀렉터(selector) : html에서 스타일을 적용할 곳을 지정

선언(Declaration) : 1개의 스타일을 입력하고 세미콜론(;)

속성(Property) : 적용할 스타일 이름

속성값(Property Value) : 지정할 속성의 값을 입력

 

 

 

 

 

---

 

 

○ 셀렉터(selector)

 

- id

• html 문서에 1개의 요소에만 적용할 수 있음
• html에 <요소이름 속성1... 속성2... id=“id Name”>
• CSS에서 해당 id에 적용할 때 ‘#id Name{ ... }’

 

 

 

- class

• html 문서에서 여러개의 요소에 한번에 적용할 때 사용
• html에 <요소이름 속성1... 속성2... class=“class Name”>
• CSS에서 해당 class에 적용할 때 ‘.class Name{ ... }’
• 하나의 요소에 띄어쓰기로 여러개의 class 적용 가능

<p class=“class1 class2 class3> </p>

 

 

- *

• 전체 선택자
• 페이지 전체 적용할 폰트(font-family) 또는 박스 사이즈를 border-line으로 셋팅할 때 사용

* {
	box-sizing: border-box;
}

 

 

- 유형 선택자

• 해당 이름을 가진 모든 요소 선택

input {
	border: 1px solid red;
}

   ↑ 페이지 내 모든 input 요소 선택

 

 

- 선택자 목록

• ' , ' 로 선택자 여러개 한번에 선택

input, button { }

 

 

- 자손 / 후손 결합자

• '  '
• 공백은 공백 앞 요소의 자손인 모든 공백 뒤 요소 선택
• ex) div span { }  --> <div>의 자손인 모든 <span> 선택
• 자손은 자식의 모든 하위 요소까지 포함 (자식의 자식, 자식의 자식의 자식, ...)

 

 

- 자식 결합자

• ' > '
• 첫번째 요소 바로 아래 자식인 요소들 선택
• ex) div > span { } --> <div>의 자식인 모든 <span> 선택

 

 

- 일반 형제 결합자

• ' ~ '
• 첫 번째 요소와 같은 부모를 공유하는 두 번째 요소들 선택
• ex) p ~ div { } --> <p>와 같은 부모를 공유하는 모든 <div> 선택

 

 

- 인접 형제 결합자

• ' + '
• 첫 번째 요소 바로 뒤에 위치하면서 같은 부모를 공유하는 두 번째 요소 선택
• ex) p + div { } --> <p> 바로 뒤에 위치하는 <div> 선택

 

 

- 속성 선택자

• 요소[속성]
• 요소에 특정 속성이 있는지에 따라 요소 선택
• ex) input[type="text"] --> input 요소에 속성이 'type' 이고 속성값이 'text' 인 모든 요소 선택

 

 

-의사 클래스/요소(pseudo-classes / pseudo-elements)

• ' : ' / ' :: '
• 의사 클래스(가상 클래스) ' : ' 는 요소가 특정 상태일 때만 스타일링
• 자주쓰는 의사 클래스

pseudo-class	설명
:hover	마우스 포인터를 요소에 가리킬 때만 스타일 적용
:first-child	형제 요소 중 제일 첫 요소가 해당 요소일 때 선택
:last-child	형제 요소 중 제일 마지막 요소가 해당 요소일 때 선택
:nth-child(4)	형제 요소 중 해당 요소가 (4) 번째일 때 선택
:nth-child(even) / :nth-child(2n)	형제 요소 중 짝수번째 요소가 해당 요소일 때 선택
:nth-child(odd) / :nth-child(2n-1)	형제 요소 중 홀수번째 요소가 해당 요소일 때 선택
:first-of-type	nth-child 와는 다르게 형제 요소 중 같은 요소 중에서 첫 번째 요소 선택
:last-of-type	형제 요소의 같은 요소들 중 가장 마지막 요소 선택
:nth-of-type(3)	형제 요소의 같은 요소들 중 (3) 번째 요소 선택
:not(:first-of-type)	부정 셀렉터, 요소 중 괄호 안의 조건을 만족시키는 요소를 제외한 모든 요소 선택

 

 

• 의사 요소(가상 요소) ' :: ' 는 요소의 특정 부분을 선택
• 자주쓰는 의사 요소

pseudo-element	설명
::first-line	해당 요소의 첫번째 줄만 선택
::first-letter	해당 요소의 첫번째 글자만 선택
::before	특정 요소의 내용(content) 부분 바로 앞에 다른 요소 삽입할 때 사용
::after	특정 요소의 내용(content) 부분 바로 뒤에 다른 요소 삽입할 때 사용
::selection	해당 요소에서 사용자가 선택한 부분만을 선택

 

 

 

- 정합성 확인 셀렉터

• ':valid' / ':invalid'
• valid는 정합성 검증이 성공한 요소에만 적용 / invalid는 정합성 검증이 실패한 요소에만 적용
• ex) input[type="text"]:invalid { } --> input 요소 중 속성이 type="text"가 아닌 요소만 선택

 

 

- 셀렉터의 우선순위

한 요소에 대해서 서로 다른 셀렉터가 같은 속성의 다른 속성값을 가질 경우 셀렉터 우선순위에 따라 상위 우선순위의 속성값을 갖게 됨

 

!important (속성값 뒤에 작성, 우선순위 0순위) -> inline style (태그에 직접 스타일 지정)

-> id 셀렉터 -> class 셀렉터 -> 속성 선택자 -> 의사(가상) 클래스 -> 의사(가상) 요소 -> 태그 선택자 -> 전체 선택자

 

 

 

 

---

 

 

 

○  박스 모델

• 모든 content는 각자의 영역을 가지고 하나의 content로 묶이는 요소들이 하나의 박스가 됨
• 박스는 항상 직사각형 모양이고 너비(width)와 높이(height)를 가짐
• html의 블럭 레벨 요소는 CSS에서 width, height 속성이 적용되지만 인라인 레벨 요소는 적용되지 않음
• CSS에서 inline 요소 태그에 ‘display: inline-block’ 를 추가하면 inline-block 요소로 성질이 변함
• 줄은 바뀌지 않지만 고유 크기 지정해줄 수 있음

 

 

 

○ 박스에서 많이 쓰는 속성(Property)

 

• width: 너비 (단위는 주로 px, % 사용)
• height: 높이 (단위는 주로 px, % 사용)
• border: padding 바깥 테두리 (value 차례대로 두께, 스타일, 색깔)

 

 

• padding: 컨텐츠 주위의 여백 (border의 안쪽 여백)
• margin: 요소의 바깥 여백 (border의 바깥 여백)

 

 

padding, margin 은 공통적으로 위, 아래, 오른쪽, 왼쪽의 여백을 따로 지정할 수 있다.

 

padding: 10px 20px 30px 40px;

순서대로 위, 오른쪽, 아래쪽, 왼쪽 값

한개의 값만 지정하면 네 방향 동시에 같은  값 지정됨

 

 

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

네 방향 각각 따로 지정할 수 있음

참고) padding, margin 의 속성값을 두 개만 지정했을 경우 차례대로 위아래, 양쪽에 적용됨

 

 

• background-color: 요소의 콘텐츠와 padding 의 배경 색
• color: 한 요소의 콘텐츠 색 (일반적으로 글자색)
• text-shadow: 한 요소 안의 글자에 그림자를 적용
• display: 요소의 표시 형식을 설정합니다 (flexbox로 만들 때 사용)
• border-radius: 모서리의 굴곡 설정 (둥근 모서리 만들때 사용)
• shadow

 

 

 

 

< 참고 링크 >

 

https://developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/CSS_basics

 

CSS 기초 - Web 개발 학습하기 | MDN

CSS (Cascading Style Sheets)는 웹페이지를 꾸미려고 작성하는 코드입니다. CSS 기초 에서 여러분이 처음 시작하며 필요한 내용을 익히도록 도와드립니다. 저희는 다음과 같은 질문에 관한 답을 드리겠

developer.mozilla.org

 

https://www.w3schools.com/

 

W3Schools Free Online Web Tutorials

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com