# CSS: 디자인을 위한 언어

Cascading Style sheets

 

cascading: 연속적인, 폭포수

연속적으로 안에를 선택할 수 있는 것!

그런 시트를 만들어봅시다아><

 

# <style>.... </style>

스타일이라는 태그.

 

# css 선언방식

 

html을 짤때도

!해서 DOCTYPE이 선언하는 거인데

CSS에도 선언하는 방식이 있다..

 

1) In-Line 인라인 방식

:

<body></body>사이에

html tag에 직접 style속성 값을 서술.

<body>
<strong style="font-size:14pxl; color:blue,">안녕하세요,</strong>
<span style="color:red;">만나서 반갑습니다~</span>
</body>

 

# 인라인 방식: 하나의 줄에 다 있다.

but 잘 안쓸것<

 

나중에, 한번에 바꿔야 하는 경우가 있으니까.

그러면, 각각의 태그를 일일이 다 찾아서 바꿔야 하기 때문에 불편하다.

수정하는데 있어서 엄청난 시간과 노력이 필요하기에

수정하기 쉽게 기술해주는 게 좋기 때문에

그렇게 쓰기 위한 방식이 내부선언방식이다.

2) Internal 내부선언방식

: HTML 문서 내부의 <head></head>사이에 stye tag로 선언.

 

3) External 외부선언방식

: CSS를 따로 파일로 저장하여 불러오는 방식< style.css >으로 파일을 여러개 불러올 수 있기 때문에

공통/자주 사용되는 부분을 따로 저장하여 사용하기에 용이함

<head>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>

 

만든 모든 페이지의 h1태그의 빨간색을 바꿔주고싶을때?

-> 일일이 바꿀것이냐?

np! External 방식 써서 style.css 를 연결해서 100개의 html마다

h1태그의 글자색을 빨간색으로 바꿔줄 수 있다.

 

# 스타일태그 안에서

h1태그를 선택했다.

선택을 하고 칼라를 빨간색으로 바꿔라 했을때

ex.

h1{color:red}

 

여기서 태그선택자(selector) : h1

서술(declaration): color:red

속성명(property): color

속성값(value): red

 

h1{color:blue; font-size:12px;}

 

Selector: h1

Property: color

Value: blue

Property: font-size

Value: 12px

Declaration 1: color:blue;

Declaration 2: font-size: 12px;

 

# 문장이 끝날때마다 세미콜론을 넣지만

두번째 문장을 끝나고 나서, 세번째 문장을

쓰지 않을 거라면 세미콜론은 생략이 가능하다(:

 

# 태그선택자에서 종류는 다양하다.

태그선택자는 중가로 열고닫고임! -> {}

 

# 인라인 방식이 더 힘이 세다!

내부선언방식을 주는 것보다 스타일은 인라인 방식이 더 힘이 세다!

그래서 내부선언방식을 같은 태그에 주더라도

(ex. h1태그가 두 개일 경우, 하나는 인라인방식이 먹혀 있다 치자.

그러면, 그 태그는 내부선언방식에 영향을 받지 않는다~)

 

# 그룹으로 묶고 싶으면

h1,h2{color:red;font-size:10px}

이런식으로 줄것~(:

# 픽셀(px)을 쓰면 절대값으로 주는것임. 절대값: 정해진값.

폰트값을 절대값이 아닌 상대적으로 주는 방법도 있다. -> em

 

# 대수 개념에서 글씨 크기를 상대적으로

크게, 작게 조절하는 방법이 있다.

픽셀은 고정값!

em은 상대적으로 조절하는 값!

 

# 그런데, 또다른 방식도 있다? -> vw

 

vw라고 하는 단위는 브라우저 크기를

조절함에 따라 글씨 크기가 변한다.

즉 ,뷰포트위드 가로의 view port에 따라서

상대적으로 글씨 크기를 조절할 수 있는 방법이다.

(반응형 웹 사이트 만들때 활용~)

단 화면의 height를 조절하는 것과는 상관이 없다.

그런데 또 어떤 단위는 height와 상관 있는 단위가 있다.

-> vh (뷰포트하이트 : but, 쓸 일 없음~)

 

# 어쨌든 제일 많이 쓰는게 px이고

상대적으로 글씨 크기를 조절하고 싶을때는

em이라는 단위를 사용하며, 화면에 따라

글씨가 변하는 것을 원할 때는 vw를 사용한다~

 

# 스타일의 주석은 조금 모양이 다르다.

구조에서는 꺾음 가로열고 느낌표 대시대시

끝날때는 대시대시 느낌표 꺾음 가로닫고 인데

 

스타일에서는 대시별표 별표대시. /* */

 

# 어쨌든, 서브라임에선 em을 이용(ctrl+/)해서 하면 바로 되니까~(:

그래도 알고 있자아!

 

# a태그라고 해서 꼭 밑줄이 걸려있어야 하나?

밑줄을 안 주고 싶을때는?

그리고 색상도 바꾸고 싶으면?

 

a{text-decoration: none;

color: green;}

 

 

# 선택자란?

: 특정 태그를 선택하여 해당 태그의 속성을 변경하는 목적으로 사용된다.

 

# tag 선택자

: 특정 태그를 선택하여 CSS속성을 적용할 수 있다.

 

# *선택자

: 전체라는 의미의 * 선택자를 사용하면 문서 전체를 선택하는 의미가 있다.

<style>
    *{color:#ff3800}
</style>

 

# 전체와 특정태그의 혼합

: 전체적으로 속성을 설정한 다음 특정 태그의 속성을 변경한다.

 

# border 속성 굉장히 중요오오!

border로 시작하는 속성이 정말 많은데

이런 각각의 속성을 한 번에 나열하고 싶을때 (속기법)

border-color:blue;

 

하지만, 색상값만 넣으면 파란색이 안보임.

파란색을 보려면 선의 두께와 색상, 스타일도 알려줘야 함.

 

세가지 속성을 알려줘야만 선을 볼 수 있다.

그런데 일일이 쓰기보다 한번에 나열하는게

속기법이다!

 

예시는 다음과 같다.

h1{border:1px solid red;}

 

# mark

 

mark태그는 브라우저가 중요하게 인식하는 태그다~

아무리 span태그에 배경색을 마크 태그처럼 준다해도,

브라우저는 span태그부분을 중요하게 생각하지 못한다.

 

곧 중요하게 인식시키기 위해선 마크태그를 주자아~(:

 

# ID선택자 vs Class선택자

 

ID선택자: 수많은 태그 중 하나의 태그에만

특별한 스타일 속성을 부여하고 싶을 때; ID를 부여

<id정말중요오!!>

<div id="special">
<style>
    #special{
    color:red;
    }
</style>

 

# class선택자: 원하는 스타일을 다수의 태그에 동시에 부여하고 싶을 때; class부여

<div class="class">

 

<style>
    .center{
    margin:0 auto;
    }
</style>

 

# margin(여백): 0 auto 라고 준 건,

마진의 값을 top부터 시작해서 시계방향으로

right는 auto bottom은 0 left는 auto.

그걸 빠르게 써준게

margin:0 auto;

 

일단 외우자~!

 

border 속성값에서도

속기법쓴것처럼 말이다:)

 

border:1px solid red;

이렇게 외운것처럼!

 

# 블럭요소들은 가로를 지정해주면, 크기를 조정가능하다.

세로도 마친가지이다~ ㅎㅎ.

지정을 안하면 컨텐츠가 있는 공간만큼 border가 생김.

 

# ul에 또 안에 ul이 들어가면

bullet의 모양이 변함.

 

그런데 사실상 웹사이트에서 bullet을 잘 안쓰고,

bullet을 없애는 스타일을 많이 쓴다.

 

만약에 내가 동일한 스타일로 바꾸고 싶다?

그러면 그 스타일로 통일시키면 됨.

 

#

ul li, ol li{list-style: squarelist-style;}

또는

ul li, ol li{list-style: none;}

이런식으로 내부선언방식 해주면됨!

 

# 공간이 떨어져 있는 이유

: 브라우저가 기본적으로 컨텐츠와

가장자리 부분에 떨어져있는 기본값이 있다.

다른요소도 마찬가지로 떨어져 있는 값들이 있는데,

그 값들이 서로 다 다르다. 그래서 레이아웃을 짜고 싶을때

떨어져있는 것을 맞추는게 상당히 어렵다.

모든요소를 선택해서 아예 그냥,

그 안에 떨어져 있는 여백이나 공백이나 이런 값들을

무조건 0으로 바꾸는 스타일을 많이 쓴다.

 

# 공백이 서로 다르기 때문에, 

서로 위치를 맞춰줄때 공백을 계산하기엔 머리가 아프니까,

default로 들어간 공백을 그냥 0으로 주는게 훨씬 맘편함~!

 

margin:0;

 

이렇게 세팅해주면 됨!

 

# margin말고 공백과관련된 스타일이 하나 더 있다.

 

바로 padding.

 

padding은 나중에 더 배울거지만~~

 

이것도 0으로 주면 같은 효과!

 

# 컨텐츠 간의 간격이나 여백을 0으로 주는 방식을

reset css라고 부른다.

 

m:0+p:0 쓰고 tap!

이렇게 emmet을 이용해서 하면 더 빨리 코딩 가능~

 

# 동일한 스타일을 여러명에게 주고싶을땐 class를 쓰고

id라고 하는건 유일하게 한번 쓰고싶을 때 쓰는것!~

 

# id를 주려면 하나만 그 스타일을 쓰고싶을 때 쓰자!!약속!!

 

# 그래서 class를 많이 씀.

 

한번 스타일을 만들어 놓고 다음에 또 쓰고싶으니까,

id를 쓰는 경우의 수보다 class를 쓰는 경우의 수가 많다.

 

# 그럼에도 불구하고 id는 언제 쓰느냐?

web페이지를 만드면서 header같은건 

딱 한 번 있고 그럴때 쓸 수 있다.

 

또다른 ex.

다섯개의 컨텐츠를 만들었다. li가 4개다.

그럼 각각의 메뉴와 관련된 컨텐츠를 section태그로 묶을 건데

section이 5개가 나온다 치자.

그중 첫번째 section에 스타일을 뭔가 주고싶다?

그럼 그 때 그 섹션에 id를 주는 경우가 있다.

 

# class명은 속성값을 더 주고 싶으면

한칸 띠고 또주고또주고 할 수 있는데,

 

# 하나의 클래스명을 지정할 땐 언더바

두번째 클래스명 지정하고 싶으면 한칸 띠고 지정!

 

인라인방식 내부선언방식 외부선언방식 선택자 태그선택자 ID선택자 class선택자 cascading 속기법 margin coding

반응형

'IT' 카테고리의 다른 글

CSS stylesheet : 외부스타일시트 연결 (코딩복습 / 독학)  (0) 2022.06.25
Coding study : CSS / margin:0 auto;  (0) 2022.06.24
코딩연습 / 복습 / 공부 : semantic tag  (0) 2022.06.23
div / span / semantic tag  (0) 2022.06.22
audio / form / input / radio / select / checkbox / label 태그연습  (0) 2022.06.21

티스토리툴바