안녕하세요 오늘은 CSS의 기본 개념과
사용법에 대해서 포스팅하겠습니다.
우선 CSS란?
Cascading Style Sheet로 뼈대를 잡아준 문서에, style을 입혀주는 역할을 합니다.
CSS 기본 사용법
CSS는 선택자로 html 요소를 선택을 한 후, { } 안에 속성과 값을 입력해 주는 형식으로 작성할 수 있습니다.
{} 안에서 속성은 속성명 : 값; 의 형태로 작성하며, ; 로 구분 지어줍니다.
작성 예시
p {color: red;}
<h1>CSS는 어려워</h1>
<p>CSS는 약간 짜증나</p>
CSS 기본 선택자
CSS에서는 스타일을 적용해 줄 html 요소를 선택해서 스타일 속성과 값을 작성해 주는 방식을 사용하고 있습니다.
이 때, html 요소를 선택한걸 선택자라고 하며 여러 형태의 선택자가 있습니다.
- 전체 선택자
- 타입 선택자
- 클래스 선택자
- 아이디 선택자
- 그룹 선택자
전체 선택자
해당 스타일 시트가 꾸며주는 웹 문서의 모든 요소를 선택하는 선택자입니다.
브라우저 기본 스타일을 초기화할 때 사용됩니다.
* {... } : * 기호로 모든 요소를 선택해 줍니다.
작성 예시
* {
padding: 0;
margin: 0;
}전체 선택자로 웹 문서의 모든 요소를 선택하여 패딩(요소 내부여백), 마진(요소 외부 여백)을 모두
0으로 초기화 해준 예시입니다.
타입 선택자
html 문서 내 스타일을 적용하고자 하는 태그를 선택해 오는 방식입니다.
태그명 {...} : 태그명으로 웹 문서에서 해당하는 태그를 모두 선택해 옵니다.
작성 예시
p {
color: red;
}이 코드는 연결된 웹 문서 내 <p> 태그를 모두 선택한 예시입니다.
클래스 선택자
HTML 문서를 작성할 때, 특정 요소만 스타일 적용을 시키기 위해 태그 내 class 속성으로 클래스명을 지정해 주고 해당 클래스명으로
스타일을 적용해 주는 방식이다.
. 클래스명 {...} : html 문서 작성 시 작성한 클래스명을. 클래스명으로 선택해 옵니다.
<h1>의진이의 CSS 포스팅~</h1>
<p class="test">테스트 클래스 입니다.</p>.test {color:white;}HTML 문서 내 <p> 태그 내 class="test"로 클래스 명을 설정 후, CSS 파일 내에서. test로 해당 클래스명을
갖고 있는 요소에 색을 입혔습니다.
아이디 선택자
특정 요소만 스타일을 적용시키기 위해 HTML 문서 내 id 속성으로 아이디명을 지정해 주고 해당 아이디명으로
스타일을 적용해 주는 방식입니다.
#아이디명 {...} : html 문서 작성 시 작성한 아이디명을 #아이디명으로 선택한다.
<h1>의진이의 CSS 포스팅~</h1>
<p id="test">아이디명 테스트입니다.</p>#test {color:white;}
위를 보면 클래스와 아이디 선택자는 사용법도 유사하고 특정 요소에 대해 스타일을 적용한다는 점에서 사용목적도 비슷해 보이는 클래스와
아이디는, 적용하는 요소의 성격에 있어 차이점이 있습니다.
클래스 선택자는 웹 문서 내 동일한 스타일을 적용해 줄 때 같은 클래스명을 여러 요소에 작성하여 활용할 수 있습니다
<h1>의진이의 CSS 블로그 ~</h1>
<button class="btn_1">버튼이야~</button>
<button>버튼2</button>
<button class="btn_1">버튼하나더~</button>.btn_1 {
padding: 20px;
text-align: center;
background:black;
border-radius:3px
}
아이디 선택자는 중복되지 않는 고유 요소/영역에 스타일을 적용해 줄 때 사용됩니다.
아이디 선택자는 동일 웹 문서 내에서 한 번만 적용 가능합니다.
그룹선택자
여러 선택자에 대해 같은 스타일을 적용해 줄 때 사용됩니다.
쉼표로 각 선택자들을 구분하여 나열하는 방식으로 사용합니다.
선택자, 선택자 {...} : 선택자와 선택자 사이에 쉼표로 구분해 주는 형식
작성 예시
div, p {
color : red;
}
CSS를 웹문서에 적용하는 방법
1. 인라인 스타일 작성법
스타일 시트를 따로 작성하지 않고 간단한 스타일을 적용하고자 할 때 사용합니다.
<h1>오늘 하루는 너무피곤하다</h1>
<p style ="color :black;">CSS 인라인 작성법.</p>장점 : 간단히 바로 적용할 수 있음
단점 : 해당 태그만 스타일적용됨, 추후 스타일 수정 시 웹 문서에서 해당 부분을 찾아서 따로 수정해야 함
2. 내부 스타일 시트 작성법
웹 문서 head 태그 사이에 <style> 시트를 작성하는 방법이다.
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<h1>울고 싶다</h1>
<p>CSS 기본 사용방법</p>
</body>
해당 웹문서 전체에 대하여 스타일 시트를 적용시킬 수 있으며, 해당 웹 문서에 대한 스타일 변경이 필요시
<style> 시트 내 내용을 수정해 주면 된다는 장점이 있음
단점으로는, 많은 웹문서로 구성된 웹 사이트이면, 웹 사이트 일괄적으로 스타일 수정이 필요시 웹 문서 하나하나 스타일을 수정해줘야 하는
단점이 있습니다.
3. 외부 스타일 시트 작성법
웹 문서와 별도로. css 확장자 파일을 사용하여 스타일 시트 파일을 따로 작성하는 방식이다.
웹 문서 <head> 내에 <link> 태그로 웹 문서와 스타일 시트 파일을 연결시켜줄 수 있습니다.
작성 예시
<head>
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>CSS세상</h1>
<p>CSS 기본 사용방법 입니다.</p>
</body><link rel="stylesheet" href="index.css">로 웹 문서 내 CSS 파일을 연결시켜줄 수 있습니다.
CSS 파일을 별도로 작성 후 해당 CSS를 적용시킬 웹 문서들에 연결시켜주는 식으로 사용하며
장점으로는 스타일 수정 시 해당 CSS 파일에서만 수정해 주면 연결된 모든 웹 문서에 변경된 스타일이 바로 적용된다는 장점이 있습니다.
웹사이트를 제작할 때 가장 일반적으로 사용하는 방법입니다.
CSS의 우선순위 CSS 상속
동일한 요소에 여러 style이 적용되는 경우 CSS 우선순위와 CSS 상속을 통해 서로 충돌하지 않도록 방지해 줌
1순위 - 중요도
스타일에는 아래 3가지 스타일이 적용됩니다.
- 사용자 스타일 : 해당 웹 사이트를 열고 있는 사용자 스타일
- 제작자 스타일 : 해당 웹 사이트를 제작한 제작자 스타일
- 브라우저 스타일 : 해당 웹 브라우저의 기본 스타일
여기서 중요도는 사용자 스타일 > 제작자 스타일 > 브라우저 스타일 순으로 적용됩니다.
2순위 - 적용범위
CSS를 작성할 때 적용범위가 좁을수록 그 우선순위가 높아집니다.
예를 들어 외부 스타일 시트로 <p>태그를 선택하여 작성한 스타일 보다 HTML 문서 내 직접 특정 <p> 태그 내 인라인 스타일로 적용한 스타일이 더 적용범위가 좁으며 우선순위가 높습니다.
다만, 스타일 속성 내부에! important를 붙일 경우 해당 속성은 가장 우선순위가 높이 적용되도록 예외처리 됩니다.
적용범위 기준 우선순위는! important> 인라인 스타일 > 아이디 선택자 > 클래스 선택자 > 타입 선택자 순으로 적용됩니다.
3순위 - 적용순서
CSS를 적용하는 방식에는, 인라인 작성방법, 내부스타일 작성방법, 외부스타일 작성방법이 있는데, 이 중 가장 마지막에 적용되는 스타일이 가장 우선 적용됩니다.
html문서의 경우 위에서부터 읽어오기 때문에 웹 문서가 작성된 순서에 따라 <head>태그 내 작성된 내용을 먼저 읽어오고, <body> 태그 내 작성된 내용을 읽어오는 식으로 웹문서를 읽습니다.
이때 이 순서에 따라 동일한 요소에 style이 여러 군데에서 적용되었을 경우 가장 마지막에 읽힌 스타일 기준으로 스타일이 적용됩니다.
CSS 상속
HTML 문서에서 포함관계에 따라 부모요소, 자식요소로 구분할 수 있습니다.
<태그 1>안에 <태그2>가 속해 있는 경우
<태그 1>은부모요소가 되며, <태그2>는 <태그1>의 자식요소가 됩니다.
- 부모요소 : 본인의 바로 상위 태그
- 자식요소 : 본인의 바로 하위 태그
<body>
<div>
<p>내 MBTI 중하나는 p야 ㅋㅋ</p>
</div>
</body>
위 경우 <p>태그에게 <div>태그는 부모 요소이며 <body>태그 는 부모요소의 부모요소 이므로 조상 태그입니다.
CSS에서는 부모요소에 스타일을 적용 후 자식요소에 따로 스타일을 적용하지 않을 경우 기본적으로 부모요소의 적용된 스타일을 자식요소가 상속받게 됩니다.
기본부터 포스팅을 하려니 매우 힘들지만, 은근 재밌네요
다음에뵙겠습니당