오늘은 CSS의
- 기본 형태
- 스타일 적용
을 배울거다.
1. 기본형태
우선 css를 사용할때 기본 형태를 알아보자.
선택자 { 속성: 속성값; 속성2: 속성값; }
*CSS에서 값을 넣어주는 대입 연산자에는 :(콜론)을
한 명령어/문장이 끝날때는 ;(세미콜론)을 넣어줘야 한다.
① 주석
/* 주석 내용 */
- HTML의 주석처리 → <!--주석내용-->
- Java 주석처리 → //주석내용
- C언어 주석처리
- Python 주석처리 → ##주석내용
② 스타일 시트&상속
- 택스트등을 꾸미는 방법은 2가지가 있다.
첫번째는,
브라우저 기본 스타일로
→ HTML만으로 웹문서 작성한 것을 웹 브라우저에 출력시킬 때의 스타일이다.
두번째는,
사용자 스타일로, CSS를 사용하고 파일에 적용하는 방법이 3가지가 있다.
- 인라인 스타일(in-line) : <p stlye ="color : blue;"> (얘는 우선순위가 높다!!)
- 내부 스타일 시트 : <head> 태그 내부에 <style>태그를 사용해서 css를 적용하는 것이다.
(인라인 스타일보다 우선순위가 낮다)
- 외부 스타일 시트 : HTML 외부에 있는 CSS파일을 HTML내부로 가져오는 것이다.
특징은
① 우선순위에 따라 스타일을 적용한다는 점
적용 순서는 [인라인 스타일 → id선택자 → 클래스 스타일 →타입선택자]순으로적용된다.
② 스타일 상속이 된다는 점이 있다.
상속이 뭘까?
우선 Java에서는 부모클래스가 자식클래스에게 자신의 특징을 물려줄때 '상속'이라고 한다.
그렇다면 css는 상속이 가능할까? 가능하다!!
부모에 적용된 스타일은 아래 자식들에게 까지 내리 적용된다.
예시를 보고 이해해보자!
<table> → 나이가 제일 많고,
<tr> → 2번째로 나이가 많고,
<td> → 제일 어리다.
실행화면은 가장 부모인 table 에 넣었기에 아래 tr, td도 모두 스타일이 적용된다.
하지만 만약 tr에 적용한다면
실행화면처럼
tr아래 td인 자식들에게 적용된다.
2. 스타일 적용
앞에서 설명했던 인라인 스타일, 내부 스타일 시트, 외부 스타일 시트를 자세히 살펴보자.
① 인라인 스타일
-인라인 스타일은 스타일을 넣고 싶은 태그의 여는 태그 안에 style을 집어넣고 css를 적용하는 방법이다.
예시를 한번 봐보자.
위에처럼 여는 태그 안에 넣어서 css를 넣어준다.
② 내부 스타일 시트
얘는 <head>안에 <style>을 넣고 <style> 안에다가
선택자 { 속성: 속성값; 속성2: 속성값; }를 쓰는건데
이 선택자를 방법에는 4가지 종류가 있다.
css 선택자
선택자는 무언가를 선택하는 것을 말한다. 이 선택자도 원하는 조건에 따라 선택해서 써야하는데 예시와 함께 쓰는 방법을 익혀보자.
1. 전체 선택자
- 전체 선택자는 서로 다른 모든 태그에 같은 스타일을 적용하고 싶을 때 사용한다.
예시를 한번 보자.
※ 참고: color로는 단어 색깔을 설정할수 있다.
이걸 사용하면
이렇게 이 html안에 있는 모든 글자들은 파란색으로 뜬다.
2. 타입 선택자(=태그 선택자)
- 특정 요소에 스타일 적용할때 사용한다.
쓰는 방법을 봐보자.
※ 참고: background-color로는 배경색을 설정할수 있다.
위에 사진처럼 설정하고 싶은 스타일을 앞에 쓰고 중괄호를 넣고 안에다가 스타일을 넣는다.
위에 줄은 h3 태그를 사용하고 아래줄은 p 태그를 사용한거다.
얘는 전체 선택자와 다르게 지정해둔 p태그에만 스타일이 들어간 것을 볼 수 있다.
3. 클래스 선택자
- 특정 부분에 스타일 적용할 때 쓰인다. 얘가 많이 쓰인다.
- 얘의 기본 형태는 .클래스이름 { 속성 : 속성값 ; } 이다. 얘는 태그 선택자와 시작할때 꼭 점을 붙여야한다.
※ CSS에서 클래스 선택자를 만들때 클래스명은 모두 다르게 준다.
코드를 보면 이런 식으로 쓰여 있고,
클래스 선택자를 적용하는 방법은
이런 식으로 CSS를 적용하고 싶은 태그의 여는 태그 안에 class를 넣고 싶은 클래스 이름을 넣어 만든다.
그러면 원하는 태그에 내가 지정한 스타일을 넣을 수 있다!
4. id 선택자
- 특정 부분에 스타일을 한번만 적용 가능하다.(중복 적용이 안된다.)
- 얘의 기본 형태는 #클래스이름 { 속성 : 속성값 ; } 이다. 얘는 태그 선택자와 시작할때 꼭 점을 붙여야한다.
id 선택자같은 경우는 그렇게 많이 쓰이는 편은 아니다.
예시를 봐보자.
<style>안에다 #이름 을 쓴다 여기서 #뒤에 들어갈 이름은 중요한데
내가 css를 주고 싶은 태그 안에 id를 넣고 이름명을 쓴다.
그리고 #이름명 = id의 "이름명"이여야 연결이 가능하다.
id 선택자는 한번밖에 사용을 못한다는걸 꼭 알고있자.
③ 외부 스타일 시트
외부 스타일 시트는 css 파일을 만들어서 거기서 css 스타일을 작성 한 후 내가 연결하고 싶은 html 파일의 내부에 link 태그를 넣은 다음 href안에 css의 이름을 쓰는 형식으로 css를 쓰는 방법을 말한다.
예시를 한번 봐보자. 우선 css 파일과 html 파일을 하나씩 만들어준다.
되도록이면 같은 폴더안에 내가 쓸 파일들을 만들자.
그후에는 <head>안에 <link rel="stylesheet" href="style.css">를 넣어준다.
href에는 내가 만든 css파일의 이름을 넣어주면 된다.
이런 식으로 연결 하고, 내부 스타일 시트와 똑같은 방식으로 원하는 선택자를 css 파일에 작성하여 쓰면 된다.
오늘은 이렇게 css의 기본 구조, 특징(적용 순서, 상속), css를 적용하는 방법과 각각의 선택자들의 종류를 알아봤다.
'프로그래밍 수업 정리 HTML' 카테고리의 다른 글
| HTML 프로그래밍 여덟번째(폰트/글자 색/ 글자 정렬/줄 간격/text-decoration/그림자) (0) | 2021.05.05 |
|---|---|
| HTML 프로그래밍 3/30 여섯번째(text/textarea태그,select, datalist, button태그) (0) | 2021.04.05 |
| HTML 프로그래밍 3/23 다섯번째(submit/reset과 button 차이) (0) | 2021.03.25 |
| HTML 프로그래밍 3/17 네번째(폼,인풋,체크박스) (0) | 2021.03.22 |
| HTML 프로그래밍 3/16 세번째(표, 행/열합침, 하이퍼링크) (0) | 2021.03.19 |
