FrontEnd : CSS기초

이지수·2021년 4월 17일

FrontEnd

목록 보기

5/7

📝CSS 기초

📌CSS3 기본 선택자

종류	형태	사용예	설명
전체 선택자	*	*	페이지 내부의 태그를 모두 선택
태그 선택자	태그	h1	페이지 내부의 특정 태그를 선택
아이디 선택자	#아이디	#id	특정 id속성이 있는 태그를 선택
클래스 선택자	.클래스	.header	특정 클래스가 있는 태그 선택

✅ 전체 선택자

<style>
*{color : red;}
</style>

👉🏻결과

모든 태그 글자 새기 빨간 색으로 바뀜

✅ 태그 선택자

h1{color :red;}
p{color : blue;}

👉🏻결과

h1태그의 글자색은 빨강, p태그의 글자색은 파랑으로 바뀜

❕ 한번에 여러개의 선택자를 입력해 스타일 적용할 때는 쉼표 이용

h1,h2,h3,h4,p{color :red;}

✅ id 선택자

id속성은 웹페이지 내부에서 중복 되어서는 안된다.
따라서 id선택자는 특정 태그 하나를 선택할 때 사용

<style>
#header{width:80px;
		background : gray;}
</style>

✅ class 선택자

class선택자는 중복될 수 있음, 웹 개발시 가장 많이 사용

<style>
.select{color:red;}
</style>

❕ 클래스 선택자를 여러개 사용할 때
공백으로 구분해 사용

<head>
<style>
.item{color:red;}
.item{background-color:black;}
</style>
</head>
<body>
<h1 class ="item header">안녕안녕</h1>
</body>

👉🏻결과

h1태그에 두가지 속성이 모두 적용되어 빨간색 글씨에 검정색 배경으로 나타남

📢 태그선택자와 class선택자 함께 사용해서 더 정확하게 태그 선택 가능

<head>
        <meta charset="UTF-8">
        <title>CSS3 Selector Basic</title>
        <style>
            li.select{color : red;}
        </style>
    </head>
    <body>
        <h1 class ="select">제목 글자</h1>
        <ul>
            <li class ="select">사과</li>
            <li>바나나</li>
            <li>오렌지</li>
            <li>감</li>
        </ul>
    </body>

👉🏻결과

h1태그와 li태그 둘다 select 클래스이지만, li태그 중 select클래스인 것만 해당 속성이 적용됨

📌CSS3 속성 선택자

input태그는 태그 이름이 모두 같지만 type 속성에 따라 형태가 다르기 때문에 input태그를 선택할 때 속성 선택자를 많이 이용함.

형태	사용예
선택자[속성]	특정한 속성이 있는 태그 선택
선택자[속성 =값]	특정한 속성 내부 값이 특정 값과 같은 태그 선택

<head>
<style>
input[type="text"]{background:red;}
input[type="password"]{background:blue;}
</style>
</head>
<body>
	<form>
    	<input type ="text"/>
        <input type ="password"/>
	</form>
</body>

👉🏻결과

📌CSS3 후손 선택자, 자손 선택자

✅ 후손 선택자

형태	설명
선택자A 선택자B	선택자A의 후손인 선택자B 선택

<style>
    <head>
        <style>
            #header h1{ color:red;}
            #section h1{color : blue;}
        </style>
    </head>
    <body>
        <div id="header">
            <h1 class= "title">Lorem ipsum</h1>
            <div id ="nav">
                <h1>Navigation</h1>
            </div>
        </div>
        <div id ="section">
            <h1 class ="title">Lorem ipsum</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipscing elit.</p>
        </div>
    </body>
</style>

👉🏻결과

#header의 후손인 h1태그는 red, #section의 후손인 h1은 blue로!
(header라는 아이디 가진 태그의 후손 중 h1은 red, section이라는 아이디 가진 태그의 후손 중 h1는 blue로)

📢주의사항

<style>
#header h1, h2{color :red;}
</style>

<style>
#header h1, #headerh2{color :red;}
</style>

차이 알기 !!!
1은 #header의 후손인 h1과 그냥 h2선택
2는 #header의 후손인 h1과 #header의 후손인 h2선택

✅ 자손 선택자

형태	설명
선택자A>선택자B	선택자A의 자손인 선택자B 선택

<!DOCTYPE html>
    <head>
        <style>
            #header > h1 {color : red;}
            #section > h1 {color : blue;}
        </style>
    </head>
    <body>
        <div id="header">
            <h1 class= "title">Lorem ipsum</h1>
            <div id ="nav">
                <h1>Navigation</h1>
            </div>
        </div>
        <div id ="section">
            <h1 class ="title">Lorem ipsum</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipscing elit.</p>
        </div>
    </body>
</html>

👉🏻결과

후손 선택자를 사용했을 때와는 달리 Navigation이 자손이 아니므로 red가 적용되자 않는다.

📢table태그에 스타일 적용시 자손선택자는 사용하지 말기!
table > tbody> tr> th로 적용해 주어야 하기 때문에 번거롭다.

📌CSS3 반응, 상태, 구조 선택자

✅ 반응 선택자

형태	설명
:active	사용자가 마우스로 클릭한 태그 선택
:hover	사용자가 마우스 커서를 올린 태그 선택

<style>
	h1:hover{color : red;}
    h1:active{color : blue;}
</style>

👉🏻결과

마우스를 커서를 올렸을 때 red로 바뀌고, 마우스로 클릭했을 때 blue로 바뀐다

✅ 상태 선택자

형태	설명
:checked	체크 상태의 input태그 선택
:focus	포커스를 맞춘 input태그 선택
:enabled	사용 가능한 input태그 선택
:disabled	사용 불가능한 input태그 선택

<head>
        <style>
            input:enabled{background-color:white;}
            input:disabled{background-color:gray;}
            input:focus{background-color:orange;}
        </style>
    </head>
    <body>
        <div id="header">
            <h1 class= "title">Lorem ipsum</h1>
            <div id ="nav">
                <h1>Navigation</h1>
            </div>
        </div>
        <div id ="section">
            <h2>사용가능</h2>
            <input>
            <h2>사용가능</h2>
            <input>
            <h2>사용불가능</h2>
            <input disabled ="disabled">
        </div>
    </body>
</html>

👉🏻결과

disabled속성 값이 디폴트면 enabled상태이므로 input태그 배경이 하얀색, 포커스가 올라가면 주황색, disabled상태이면 회색이 적용

📢html에서 주석은 , css에서는 /*주석*/ 형태로 씀

✅ 구조 선택자

형태	설명
:fisrt-child	형제 관계에서 첫 번째로 등장하는 태그 선택
:last-child	형제 관계에서 마지막으로 등장하는 태그 선택
:nth-child(수열)	형제 관계에서 앞에서 수열 번째로 등장하는 태그 선택
:nth-last-child(수열)	형제 관계에서 뒤에서 수열 번째로 등장하는 태그 선택

li:nth-child(2n){background-color: #FF0003; }
li:nth-child(2n+1){background-color: #800000; }
이런식으로 수열이 들어가는데 n에 0부터 대입해서 그 번째에 등장하는 태그를 선택한다.

    <head>
        <style>
            ul{overflow : hidden;}
            li{
                list-style:none;
                float:left;padding :15px;
            }
            li:first-child{border-radius: 10px 0 0 10px;}
            li:last-child{border-radius: 0 10px 10px 0;}

            li:nth-child(2n){background-color: #FF0003; }
            li:nth-child(2n+1){background-color: #800000; }

        </style>
    </head>
    <body>
        <ul>
            <li>첫 번째</li>
            <li>두 번째</li>
            <li>세 번째</li>
            <li>네 번째</li>
            <li>다섯 번째</li>
            <li>여섯 번째</li>
            <li>일곱 번째</li>
        </ul>
    </body>
    ```

👉🏻결과

📢주의사항

<body>
	<ul>
    	<li><a href ="#">주의 !</a></li>
        <li><a href ="#">주의 !</a></li>
        <li><a href ="#">주의 !</a></li>
        <li><a href ="#">주의 !</a></li>
</body>

위의 body에 적용할 스타일이 다음과 같을 때 차이 알기 !!!

<style>
  li> a:first-child{color : red;}
</style>

=>li태그의 첫 번째 자손에 해당하는 a태그를 선택
모든 a태그가 빨간색이 적용됨

<style>
  li:first-child > a{color : red;}
</style>

=>첫 번째 li태그의 자손에 해당하는 a태그를 선택
첫번째 a태그만 빨간색이 적용됨

📌CSS3 단위

✅ 키워드

w3c에서 미리 정의한 단어.
키워드를 스타일 값으로 입력하면 키워드에 해당하는 스타일이 자동으로 적용
매우많음

✅ 크기

단위	설명
%	백분율 단위
em	배수 단위
px	픽셀 단위

<style>
p{font-size : 200%}
</style>

=> %단위는 기본으로 설정된 크기를 기준으로 상대적인 크기를 지정
100%가 초기 설정값

<style>
p{font-size : 2em;}
</style>

=> em단위는 배수를 나타내는 단위.
1em = 100% = 1배
1.5em = 150% = 1.5배
2em = 200% = 2배

<style>
p{font-size : 32px;}
</style>

=>px는 절대적인 크기 지정
초기 설정 값은 16px

font-size속성, width속성, height속성 등에 크기 단위 적용가능

✅ 색상

단위	예시	설명
영단어	red, blue, orange ...	rgb값입력, 0-255사이의 숫자
rgb색상		배수 단위
rgba색상	rgba(255,255,255,0.5)	알파값은 투명도를 나타냄. 0.0은 완전 투명, 1.0은 완전 불투명
hex코드	#0094F	rgb색상단위를 짧게 입력하는 방법, 16진수로 입력

=>colorpicker 사용하면 편리하다.

✅ url

url('경로')

body{background-image : url('cow.png')};//현재폴더의 cow.png
background-image : url('velog/cow.png');//velog폴더의 cow.png
background-image : url('/cow.png');//루트 폴더의 cow.png

이지수

The only thing worse than starting something and failing...is not starting something

FrontEnd : CSS기초

FrontEnd

📝CSS 기초

📌CSS3 기본 선택자

✅ 전체 선택자

✅ 태그 선택자

✅ id 선택자

✅ class 선택자

📢 태그선택자와 class선택자 함께 사용해서 더 정확하게 태그 선택 가능

📌CSS3 속성 선택자

📌CSS3 후손 선택자, 자손 선택자

✅ 후손 선택자

✅ 자손 선택자

📌CSS3 반응, 상태, 구조 선택자

✅ 반응 선택자

✅ 상태 선택자

✅ 구조 선택자

📌CSS3 단위

✅ 키워드

✅ 크기

✅ 색상

✅ url

FrontEnd : HTML 문서 구조화

FrontEnd : CSS 속성

0개의 댓글