잡동사니

[CSS]CSS 기초

jungeun960 2020. 1. 23. 16:00

HTML은 웹 문서의 내용을 맡고, CSS는 웹 문서의 디자인을 담당한다.

스타일과 스타일 시트

 

  • 내부 스타일 시트

: <head>태그과 </head> 태그 안에서 정의해야 하고 <style>태그와 </style> 태그 사이에 작성한다.

 

  • 외부 스타일 시트

: 여러 웹 문서에서 사용할 스타일을 별도 파일로 저장해 놓고 필요할 때마다 파일에서 가져와 사용하는 것

<link href="외부 스타일 파일 경로" rel="stylesheet" type="text/css">

 

  • 인라인 스타일

: 간단한 스타일 정보라면 스타일 시트를 사용하지 않고 스타일을 적용할 대상에 직접 표시한다.

ex)
<p style="color:blue;"> 인라인 스타일 </p>

 

주요 선택자

 

  • 전체 선택자 : 모든 요소에 스타일 적용하기 
* { 속성 : 속성 값; 속성 : 속성 값; ... }

ex) 
* {
	margin: 0;
    padding : 0;
}

 

  • 태그 선택자 : 특정 태그를 사용한 요소에 스타일 적용하기
태그 { 스타일 }

ex)

p {
	font-size:small; // 글자 크기
    font-weight:blod; // 글자 모양
}

 

  • 클래스 선택자 : 특정 부분에 스타일 적용하기
.클래스명 { 스타일 }

ex)
.bluetext{
	color : blue;
}

...

<p class="bluetext"> 클래스 선택자 </p>

 

  • id 선택자 : 특정 부분에 스타일 적용하기

※ 클래스 선택자와 비슷하지만 id 선택자는 딱 한번만 쓸 수 있다.

#아이디명 { 스타일 }

ex)
#container {
	width : 400px;
    height : 200px;
    margin : 0 auto;
}

...

<div id="container"> id 선택자 </div>

 

  • 그룹 선택자 : 둘 이상 요소에 같은 스타일 적용하기
이름, 이름 .. { 스타일 }

 ex)
 h1, h2 {
 	text-align:center;
 }

 

캐스캐이딩(Cascading) 스타일 시트(CSS)

: 캐스캐이딩이란 '위에서 아래로 흐르는 스타일 시트'라는 뜻으로, 선택자에 적용된 많은 스타일 중에 어떤 스타일을 나타낼지를 결정함을 뜻한다.

1. 스타일 우선 순위

- (명시도) 인라인 스타일 > id스타일 > 클래스 스타일 > 태그 스타일

- (Source Order) 같은 스타일의 경우, 소스에서 나중에 온 스타일이 먼저 온 스타일을 덮어쓴다.

 

2. 스타일 상속

 스타일 시트에서는 자식 요소에서 별도로 스타일을 지정하지 않으면 부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다.

※ 스타일의 모든 속성이 부모 요소에서 자식 요소로 상속되는 것은 아니다.

 

텍스트 관련 스타일

  • font-family : 글꼴을 지정하는 속성
  • font-size : 글자 크기를 지정하는 속성
  • font-weight : 글자 굵기를 지정하는 속성
  • font-sytle : 글자 스타일을 지정하는 속성
  • color : 글자 색을 지정하는 속성
  • text-decotation : 텍스트에 줄 표시하기 / 없애기 ex) 링크에서 생기는 밑줄 없애기
  • text-align : 텍스트 정렬하기
  • text-overflow : 넘치는 텍스트 표기하기
  • list-style : 목록 스타일 지정하기

 

색상과 배경을 위한 스타일

  • background-color : 배경색을 지정하는 속성
  • background-image : 배경 이미지를 지정하는 속성
  • background-repeat : 배경 이미지의 반복 방법을 지정하는 속성
  • background-size : 배경 이미지의 크기를 조절하는 방법
  • background-position : 배경 이미지의 위치를 지정하는 방법
  • background-origin : 배경 이미지의 배치 기준 조절하는 방법
  • background-attachment : 배경이미지의 고정 여부를 지정하는 속성 ex) 화면이 스크롤되더라도 배경 이미지는 고정되게 하기
  • background-size : 배경 이미지의 크기를 조절하는 속성
  • background : 배경을 한꺼번에 지정하는 속성

 

레이아웃을 위한 스타일

  • width, height : 박스 모델의 너비와 높이
    • 속성을 auto 로 설정 시 박스 모델의 너비와 높이 값이 콘텐츠 양에 따라 자동의로 결정됨
  • display : 화면에서 요소가 어떻게 보일지를 결정하는 속성
    • display : flex : 가로 정렬
  • border :  박스 모델의 테두리 - style, width, color, radius, shadow
  • margin : 박스 모델의 마진(요소와 요소 사이의 여백)
  • padding : 박스 모델의 패딩(테두리와 내용 사이의 여백)
  • border-radius : 박스 모델의 모서리를 둥글게 처리

 

CSS 포지셔닝

  • float : 왼쪽이나 오른쪽에 배치
    • 문서 구조 만들기 - header, sidebar, contents, footer ...
  • clear : float 속성 해제
  • positon : 배치 방법 지정
    • fixed 속성 값 : 브라우저 창 기준으로 배치하기 ex) top 버튼 : 스크롤하더라도 정해진 위치에 계속 고정
  • visibility : 요소를 화면에 표시하거나 감추기
    • ex) 팝업창 삭제 시 visible에서 hidden으로 변경하기
  • z-index : 요소의 쌓는 순서 결정
  • column : 다단 편집 
    • 속성 : width(단의 너비), count(단의 개수), gap(단과 단 사이 여백), rule(구분선의 색상, 스타일, 너비), break-after(다단 위치 지정), column-span(여러 단을 하나로 합치기) 
  • border-collapse : 테두리 합치기
  • table-layout : 콘텐츠에 맞게 셀 너비 지정
  • vertical-align : 셀 안에서 수직 정렬
반응형