본문 바로가기
STUDY/HTML,CSS,JS

CSS

osy9907 2024. 2. 29. 16:58
728x90

CSS

  • Cascading Style Sheet
  • 문서의 내용과 꾸미는 부분을 나누기 위해 만들어진 언어
  • 특징
    1. 다른 내용에 동일한 스타일 적용
    2. 같은 내용에 다른 스타일 적용
      • 특히 같은 내용을 다양한 기기에 다른 레이아웃으로 제공 가능

일반형식

  • 선택자로 스타일을 추가하고 싶은 HTML요소를 지정
  • 선언부에 스타일 속성: 속성값; 형태로 추가
    • 여러개의 속성을 추가하고 싶을 때는 ;(세미콜론)으로 구분
  • div -> 선택자 / background-color -> style 속성 / red -> 속성값
div{background-color:red;}

 

CSS 작성 방식

  1. inline 방식
  2. internal 방식
  3. external 방식

inline방식

  • 태그 내부에 스타일 정보를 지정하는 방법
<html>
    <head></head>
    <body>
        <p style="text-align: center;"콘텐츠></p>
    </body>
</html>

 

internal방식

  • style 내부에 스타일 정보를 저장하느 방식
<style>
    p{text-align: center;}
</style>
<p>콘텐츠</p>

 

external 방식

  • link 태그를 이용해 css파일을 읽어와서 스타일 적용
<link rel="stylesheet" href="파일명" type="text/css">

 

css선택자

  • 웹 페이지에서 스타일을 적용할 태그를 선택하는 방법
    1. 전체 선택자
    2. 태그 선택자
    3. 아이디 선택자
    4. 클래스 선택자
    5. 속성 선택자
    6. 후손 선택자
    7. 자손 선택자
    8. 반응 선택자
    9. 상태 선택자
    10. 구조 선택자
    11. 부정 선택자

전체 선택자

  • <html>에 있는 모든 태그에 적용되는 스타일
    • 전체 태그는 body태그에 있는 요소 뿐만 아니라 html, head에도 적용됨
*{설정내용;}

 

태그 선택자

  • 특정한 태그에 적용되는 스타일
    • 여러개 태그 선택 시에는 ','(쉼표)로 구별해 작성
태그명{설정내용;}

 

id

  • 하나의 문서에 하나의 요소에만 적용할 수 이음
  • 특정 태그에 이름을 붙이는데에 사용
<img src="profile.jpg" width="400" id="zoom">

 

class

  • 여러 개 요소에 동일하게 적용가능
  • 스타일을 분류하는 데에 주로 사용
<div class="card"></div>

 

 

아이디 선택자

  • 태그에 id를 설정하고 id값을 선택자로 하는 것
#아이디{설정내용;}

 

클래스 선택자

  • 태그에 class를 설정하고 class값을 선택자로 하는것
  • class 선택자는 중복O, id선택자는 중복X
  • class가 중복 허용 -> 영역을 정확하게 하기 위해 태그 선택자와 같이 사용하는 경우 있음
.클래스{설정내용;}

 

속성 선택자

  • 지금 선택자와 함께 사용하는 선택자로 선택자 뒤에 []를 사용하여 속성과 속성값을  아용
선택자[속성=속성값]{설정내용;}

 

후손 선택자

선택자 후손선택자{설정내용;}
<div>
    <h1></h1>		]			]
    <h2></h2>		]자손			]
    <ul>		]			]
        <li></li>				]후손
        <li></li>				]
    </ul>					]
</div>

 

자손 선택자

  • 여러개 자손 선택 가능(선택자>자손>자손>자손...)
  • chrome 웹 브라우저에서 table 태그에 tbody 태그 자동 생성 주의
선택자>자손선택자{설정내용;}

 

반응 선택자

  • 사용자의 움직임에 따라 달라지는 선택자
    • 선택자 : active(설정내용;}
    • 선택자 : hover(설정내용;}
    • 선택자 active : 사용자가 클릭한 태그 선택
    • 선택자 hover : 사용자의 마우스가 올라가 있는 태그 선택

 

상태 선택자

  • 입력 양식의 상태에 따라 선택되는 선택자
구분 내용
input태그 : checked 체크 상태의 input태그 선택
input태그 :  focus 초점이 맞추어진 input태그 선택
input태그 :  enabled 사용 가능한 input태그 선택
input태그 :  disabled 사용 불가능한 input태그 선택

 

구조 선택자

  • 특정한 위치에 있는 태그 선택(위치로만 구분)
<div>
    <p></p>     ]
    <p></p>     ]형제 관계
    <p></p>     ]
</div>
구분 내용
first-child 형제 관계 태그 중 첫 번째 태그 선택
last-child 형제 관계 태그 중 마지막 태그 선택
nth-child(수열) 형제 관계 태그 중 앞에서 수열 번째 태그 선택
nth-last-child(수열) 형제 관계 태그 중 뒤에서 수열 번째 태그 선택

 

부정 선택자

  • 지금까지의 선택자에 대해 반대로 적용하는 선택자
  • 선택자에는 다른 부정 선택자나 가상 요소를 넣을 수 없음
구분 내용
요소:not() 선택자를 반대로 적용하여 선택

 

선택자 우선순위

  • 기본적으로 작성된 순서에 따라 적용
  • 위에서부터 아래로 읽기 때문에 마지막에 작성된 코드 반영
  • 그러나 일부 선택자는 기본 규칙을 거스를 수 있음
  • 적용방법에 따른 순위
    1. !important
    2. 인라인 스타일
    3. id 선택자
    4. class, 속성 선택자
    5. 태그 선택자
    6. 전체 선택자
728x90

'STUDY > HTML,CSS,JS' 카테고리의 다른 글

css기초연습  (0) 2024.03.19
HTML  (0) 2024.02.27

'STUDY/HTML,CSS,JS' Related Articles

티스토리툴바