[CSS] inline style sheet | Class | ID | div | span

14일차

목차

1. CSS 기본 설정

2. 인라인 스타일(inline style) 시트

3. class

4. ID

5. 그룹요소(div, span)

---

 

https://www.w3schools.com/

W3Schools Online Web Tutorials

 

 

1. CSS 기본 설정

생성해놓은 폴더 선택

폴더 확인

 

2. 인라인 스타일(inline style) 시트

태그 안에 바로 스타일을 적용하는 것

폰트 기능 적용 전

폰트 기능 적용 후

 

 

3. class

클래스 지정

 

 * 클래스를 호출할 때는 . / ID를 호출할 때는 #

style에 .클래스명으로 지정

유니코드로 색상 지정

 * css에서는 디자이너가 색상을 직접 지원하기 때문에 지원할 수 있는 색상 폭이 더 넓다

 * HTML에서 지정하는 색상은 디자이너가 빠진 색상이기 때문에 색의 폭이 좁다

 

 * 같은 파랑색이지만 다른 색상이 나온다

글자 크기

CSS가 지워진 네이버의 모습

 

*크롤링으로 글자 바꿔보기

 

 

2. css 폴더

클래스가 많아지면 코드가 지져분해질 수 있어서 실무에서는 파일로 나눔

클래스로 나누어서 지정했던 색상과 글자크기를 새로운 파일에 작성

 

* rel : 현재 문서와 외부 문서 사이의 연관 관계를 명시 (link 의 필수요소)

<style>로 적용했던 부분에 link로 css 파일을 연결해줌

적용 확인

css 파일을 수정하면 적용 된다

 

여분의 공백이 존재

* 공백 없애기

* : 모든것을 의미

margin / padding : 안쪽과 바깥쪽의 여백

여백을 다 삭제한 모습

배경색 변경

 

*바디 여러개 사용

 

line-height : 줄간격

 

*클래스의 일부만 지정

<span></span> : 인라인 요소들을 그룹으로 정의하는 태그

 

 

4. ID

ID는 절대 중복 불가 (class는 가능) 

 > 자바스크립트가 ID를 변수로 사용하기 때문에 중복 불가

 

1. # : id를 호출

 

*인라인에서 바로 설정할 수 있지만 코드가 지저분해지기 때문에 실제 사용은 잘 하지 않는다

*인라인스타일시트에서 기능을 적용하면 1순위로 올라가기 때문에 임베디드에서 수정을 해도 적용되지 않는다

 

* !important : 중요도가 높음

!important 가 붙어있는 빨강색으로 글자가 설정됨

 

위에서 아래로 내려오며 적용되기 때문에 빨강색이 먼저 적용된 후 아래의 주황색으로 다시 적용되며

빨간색은 삭제가 됨

 

스타일의 상속

 

 

5. 그룹요소(div, span)

*div : block 태그

 span : inline 태그

div로 설정하니 모든것에 설정이 적용된다

id 별 설정

span은 inline 태그이기 때문에 옆으로 나열된다

위의 block 태그와 달리 inline은 옆으로 나열된다

 

box1에 설정한 vid의 넓이를 배경색상을 넣어서 확인할 수 있다

 

* %는 화면의 크기에 따라서 조절된다

%로 설정한 넓이는 화면의 크기에 따라 크기가 바뀐다

 

pixel로 작업하면 화면크기가 변해도 넓이가 변하지 않기 때문에 모바일을 염두해두고 있다면 %로 작업을 해야한다

pixel로 입력해서 화면크기가 변해도 크기가 고정되어있다

* span 태그는 inline 태그이기 때문에 가로세로의 길이를 설정할 수 없음 (글자크기만 조정 가능)

 

*span을 div로 묶어서 %를 설정하면 적용이 된다

화면크기에 따라 배경색의 크기가 달라지는 모습