지구정복
[CSS] 기초1 본문
목차
- CSS 개념
- DOM 돔에 대하여
- 셀렉터란
- Inline Style
- HTML 태그 안에 스타일 지정
- 내부 스타일 시트
- 외부 스타일 시트
- <link> 태그에 대하여
- 셀렉터
- 태그 셀렉터
- 클래스 셀렉터
- 아이디 셀렉터
- 유니버셜 셀렉터
- 그룹 셀렉터
- 조합자(콤비네이션)
- 자식 적용
- 후손 적용
- 아우 적용
- 아우들 적용
CSS란 Cascading Style Sheet 의 줄임말이다. html의 뼈대를 나타내는 구조표현이면
css 는 웹 페이지의 디자인, 레이아웃 등 스타일 추가하는 언어이다.
여기서 Cascading이란 수정요소를 계속 더해가는 의미이다.
예를들면 internet explorer11 버전의 네이버로 들어간다음 주소창 밑에 오른쪽 버튼으로 메뉴를 체크하고
생긴 메뉴에서 보기탭 - 스타일 - 스타일 없음 을 누르면 css가 제거된 네이버 홈페이지를 볼 수 있다.
또한 웹 페이지에서 'F12'를 누르면 웹 페이지에 대한 소스코드가 보이고 html 구조와 css가 무엇이 적용되었는지
확인할 수 있고 css 적용된 것을 끌 수 있다. 또한 추가해서 테스트할 수도 있다.
*참고
돔(DOM)
돔이란 웹 브라우저가 html 페이지를 인식하는 방식을 이야기하거나 문서 객체와 관련된 객체의 집합에 관한 인터페이스이다.
즉, 웹 페이지에 대한 프로그래밍 인터페이스이다.
돔은 원본 HTML 문서의 객체 기반 표현 방식이며 돔의 개체 구조는 노드 트리로 표현된다.
노드트리: 하나의 부모 줄기가 여러 개의 자식 가지를 가지는 나무와 같은 구조
돔은 HTML 문서로부터 생성이 되지만 항상 같지는 않다.
-HTML: 화면에 보이고자 하는 모양과 구조를 문서로 만든 것으로 단순 텍스트로 구성되어있다.
최초에 화면을 그릴 때 사용하는 설계도
-DOM: HTML 문서의 내용과 구조가 객체 모델로 변화되어 다양한 프로그램에서 사용될 수 있다.
설계도를 이용하여 실제로 화면에 나타내지는 인터페이스
-셀럭터(Selector)란?
말 그대로 선택을 해주는 요소이다. 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 됩니다.
p {color: red; padding: 5px;}p는 선택자
{ } 중괄호는 선언 블록
color: red; 는 선언이고
color 는 속성
red; 는 속성값을 의미한다.
ㅁInline Style
비쥬얼스튜디오 코드에서 '오픈폴더' - ROOT에서 css 폴더 선택, 오른쪽 파일 추가
Inline Style이란 html 요소 내부에 style 속성을 사용하여 css 스타일을 적용하는 방법을 의미한다.
이러한 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있다.
1. HTML 태그 내에 스타일 지정
<body> 태그에 스타일 속성을 설정한다. body 태그 뿐만 아니라 html 태그 내에 스타일 지정하는 방법
html 문서의 배경색을 초록색으로 만든다.
2. 내부 스타일 시트
다음은 <head> 태그안에 스타일 속성을 설정해서 html 문서의 배경을 파랑색으로 만든다.
3. 외부 스타일 시트
CSS 내용만 들어가있는 css 파일을 만든다. 그리고 그 안에 css 내용을 작성한다.
그리고 css를 불러올 html <head> 태그에서 <link> 태그를 사용해서 css파일을 불러온다.
외부 스타일 시트 방법을 주로 많이 사용한다.
위에 3개를 동시에 사용하면 1 가 가장 우선, 그다음 2, 마지막이 3번으로 적용된다.
동시에 사용했을 때 우선순위 1 > 2 > 3
*참고 <link> 태그
<link> 태그는 외부의 문서를 연결시키는 태그이고 헤드 태그 사이 넣는다.
이 태그의 속성값으로는
-href : 연결할 곳의 주소이다(절대주소, 상대주소 모두 가능)
-rel : 현재문서와 연결문서의 관계를 표시한다.
stylesheet : 스타일 시트로 연결할 때
alternate : 문서의 대안 버전(프린트나 번역 사이트)으로 연결할 때
author : 저작자로 연결할 때
help : 도움말로 연결할 때
license : 문서의 저작권 정보로 연결할 때
search : 검색 도구로 연결할 때
-type : 연결 문서의 MIME 유형 (herf 속성이 설정될 때만 사용함)
MIME(Multipurpose Internet Mail Extensions)은 원래 전자 메일 전송을 위한 인터넷 표준이었으나 현재는
웹에서 내용 유형을 말할 때 자주 쓰임. MIME type 은 대표적으로 아래와 같다.
css 파일의 경우 text/css
js 파일의 경우 text/javascript
xml 파일의 경우 application/xml
-media : 연결 문서가 표시될 장치 또는 미디어 유형
all : 기본값
tv : 텔레비전 유형의 장치
screen : 컴퓨터화면, 태블릿, 스마트폰 화면
print : 프린트 미리보기와 인쇄 페이지 모드
speech : 페이지를 읽어주는 스크린 리더
-같이 사용 가능한 연산자
and, not, or, width, height, device-width(장치 자체 화면의 너비), device-height(장치 자체 화면의 높이),
orientation(화면을 가로로 넓게(landscape)할지 세로로(portrait)할지 지정)
예시)
<link rel="stylesheet" type="text/css" href="print.css" media="print">
ㅁ Selector 셀렉터
아래의 셀렉터들은 중복으로 사용 가능하다.
ㅇ태그 셀렉터
셀렉터를 사용해보자. 먼저 css가 없는 예시 문장은 아래와 같다.
여기에 헤드 태그안에 css를 정의해본다.
ㅇ클래스 셀렉터
태그를 하나의 클래스로 묶어서 css 동시에 적용할 수 있다.
헤드 태그 안에서 .p1 .p2 .p3 클래스에 대한 셀렉터를 정의하고
바디 태그 안에서 각각의 클래스를 지정해주어 css 적용시킨다.
p 태그 자체에 배경색을 설정할 수 있다.
ㅇ아이디 셀렉터
특정 태그에 id 값을 지정해서 특정 id 값을 가진 태그에만 css를 적용하는 것이다.
id 셀렉터 정의하는 방법은 #id값 {속성: 속성값;} 형식이다.
ㅇ유니버셜 셀렉터
html 문서 안에 있는 모든 요소들에 효과를 주는 셀렉터이다.
ㅇ그룹 셀렉터
셀렉터를 , 를 이용해서 그룹화해서 정의할 수 있다. 밑에 예제를 참고
ㅁ콤비네이션(조합자)
선택자들을 조합하는 방법을 제공한다.
ㅇ자식 적용
아래 예제에서 div 태그 안에 있는 p 태그만 css를 적용시키려면
div > p 조합셀렉터를 이용한다.
ㅇ후손 적용
div 안에 포함된 모든 p태그에 대해 적용시킨다.
ㅇ아우 적용
div 바로 밑에 있는 p태그 하나만 적용시킨다.
ㅇ아우들 적용
div 밑에 있는 모든 p 태그에 대해 적용시킨다.
'데이터 엔지니어링 정복 > HTML-CSS-JavaScript-Spring-Node.js' 카테고리의 다른 글
| [CSS] 기초3 (0) | 2020.10.29 |
|---|---|
| [CSS] 기초2 (0) | 2020.10.29 |
| [HTML] HTML 기초4 (0) | 2020.10.28 |
| [HTML] 검색사이트 구현하기(form태그사용) (0) | 2020.10.28 |
| [HTML] HTML기초3 (0) | 2020.10.28 |
