CSS

#스타일을 설정하는 법

Inline styles : You can write your styles directly inline on each element. but this is NOT a good idea most of the time.인라인 스타일을 일일히 입히려면 모든 태그에 복사를 해서 입혀줘야되기 때문.
The <STYLE> element. : you can write your styles inside of a <style> element. This is easy, but it makes it impossible to share styles between documents. NOT RECOMMANDED either.
External stylesheet : write your styles in a .css file and then include the using a <link> in the head of your html document. Recommnaded. <link> element를 이용해서 시트를 각각연결해준다. attribute로 href =" "부분에 연결할 시트를 적어준다. rel은 딱히 필요한 요소는 아님. <link>는 언제나 <head>로 들어가야 한다.

<link rel = "stylesheet" href = "my_styles.css">

#색 및 배경색 속성

.css 파일을 만들었으면 이제 그 파일에서 스타일을 정할 수 있음.
만약 <h2>태그가 걸린 모든 부분을 바꾸고 싶다면, h2{}를 만들고 그 안에 바꾸고 싶은 속성들을 넣어주면 된다.

h2{
	color : green;
}

background-color를 설정하면 배경색을 바꿀 수 있음.
<h2>같은 태그는 블록태그라서 전체영역을 차지한다.

backgorund-color대신 background만 써서 배경을 바꿀수도 있다. 하지만 background는 엄연히 다르게 작동하는 것!

#RGB와 알려진 색상

css에서 정해진 색은 140가지정도 됨.
RGB를 바탕으로 색이 구성되는 것임.
Each channel ranges from 0 to 255
rgb를 순서대로 작성 후 그 안에 세가지 채널 RGB를 차례대로 표시한다. 괄호 안에는 순서대로 red, green, blue로 표시된다.

rgb(255,0,0)
rgb(0,0,255)
rgb(173,20,219) //여러가지 색의 배합이 있는 경우에는 온라인색 선택기나 컬러팔레트에서 찾아야함
rgb(0,0,0)

#16진법

16진법을 이용해서 컬러를 표시할수도 있음. hex 컬러라고 부름.
Hex : still red, green and blue channles. Each ragnes from 0 - 255 BUT represented with hexadecimal(16진법)
0~9까지의 숫자와 A, B, C, D, E, F 까지 알파벳을 사용한다.
가장큰 16진법 숫자는 15인 F 이다.
이렇게 hexadecimal 컬러를 사용하는 이유는 좀 더 짜임새 있는 색상명과 색상 차트를 만들기 위해서다.
#ffff00 이라는 컬러를 보자. 16진법을 이용할때는 #표시는 꼭 앞에 나와야 한다. 두글자씩 순서대로 red, gree, blue인것이다. 지금 red와 green은 모두 f로 작성되어 있으니까 최고치이고, blue는 최소인 0인 것
#0f5679 라는 컬러는 어두운 청록색을 띄는 컬러.
rgb보다 hex컬러 체계를 더 많이 사용함.
각각의 red, green, blue 컬러의 숫자가 동일하게 들어간다면 하나씩만 써도 작동한다. ex) #000000 -> #000 으로 써도 동일한 효과 / #33cc00 -> #3c0으로 써도 동일한 효과가 나타난다.

#일반 텍스트 속성

text-align : 텍스트의 위치를 정할 수 있음 // center , right, left 등으로 값을 주면 됨. text-align으로 텍스트의 위치를 바꿀 수는 없다. 이 태그는 h1이 내용의 한도 내에서만 작용한다.
width : 요소의 너비를 지정할 수 있음. length / percentage / 키워드 / 전역값 으로 설정 가능.
font-weight : 폰트의 굵기를 설정하는 태그. 키워드/ 숫자로 설정할수 있다. 보통 400정도면 normal , 700정도면 bold 정도로 폰트 굵기가 정해진다. 하지만 모든 폰트의 굵기조절이 가능한 것은 아니다. 그럼 브라우저는 가장 비슷한 크기의 폰트로 설정을 알아서 함.
text-decoration : 텍스트 주위로 선을 그을 수 있음 underline / overline/ line-through(가운데 긋기)로 설정이 됨. 색을 넣으면 같이 색도 바꿀 수 있다. hex컬러로도 설정 가능함.
폰트스타일도 설정 가능함. wavy / solid/ double line etc. 합쳐서 한줄에 써도 되고 text-decoration-style : 을 넣어서 여기에서 설정도 가능하다.
line-height : 줄 간격 설정 가능. 텍스트이 크기나 폰트는 건드리지 않고 줄 간격만 조절한다. 마우스로 하이라이트를 쳐보면 하이라이트의 간격도 동일하게 넓어지거나 좁아지는걸 볼 수 있다.

 text-decoration : blue overline;

letter-spacing : 글자간 간격 설정

# 픽셀로 글꼴 크기 지정하기

px로 글꼴크기를 지정하는건 가장 흔한 방법이다. 1px does not necessarily equal the width of exactly one pixel! Not recommanded for responsive websites.

#글꼴집합

폰트는 해당 운영체제에 따라 지원이 안되는 경우도 있고 흔하게 사용되는 경우도 있다. 해당 폰트가 지원되지 않는다고 해서 글이 안뜨는건 아니지만, 그냥 다른 기본 글씨체로 뜨는 경우가 생긴다.
font-family 를 사용해서 폰트를 설정해줄 수 있음. 폰트는 여러가지를 , 로 넣어줄수가 있다. 첫번째 폰트가 없다면 다음 폰트로 설정되도록 만들어 주는 것. [font-family : arial, verdana] 보통 백업폰트로 2-3개를 더 넣어준다. 항상 제네릭 대체 폰트로 타입을 지정해서 백업을 넣는게 좋다.
아니면 이미 지정되어있는 font-family의 이름을 넣어주면 그 안에 들어있는 폰트중에서 브라우저가 알아서 하나 정해서 설정을 해줄 수 도 있다.

#CSS Selectors(★★★★★)

Css rules : everything you do in css follows this basic pattern

selector {
	property: value; 
}

Universal Selector : select everything ! 모든 요소를 선택해서 동일한 스타일을 입힐 수 있다. 하지만 크기가 큰 문서에서는 사용하는게 그닥 좋진 않고, 이것 말고도 다른 방법으로 스타일을 설정할 수 있기때문에 추천되진 않는다.

*{
	color : black;
}

Element selector : 지정된 타입의 모든 항목을 선택한다. 아래처럼 같은 태그들은 모두 동일한 스타일을 적용시켜 준다.

img{
	width : 50%;
}

button{
	color : red;
}

Selector list : select all h1's and h2's. 콤마로 연결해서 해당 태그들을 같은 스타일을 입힌다.

h1,h2{
	color : magenta;
}

ID selector : select the element with id of 'longout'. id 값은 html 파일에서 중복되지 않게 한 요소만 딱 찝어서 쓸 수 있는 요소다. 만약에 버튼이 많이 있지만 로그아웃 버튼만 다르게 스타일링하고 싶다면, id값을 설정해 id 값으로 스타일을 정하면 된다.

#logout{    //id 값을 부를때는 #를 붙여서 불러야함 
	color : orange;
    height : 200px;
}

id 값을 설정할때는 되도록이면 짧으면서 의미가 담긴게 좋다. 그리고 한 id 값은 꼭 페이지 내에서 한번 만 나와야 한다!
하지만 id 값도 한페이지에 너무 많이 나오는건 좋지 않다. 한 페이지에 10개 이내로 사용하는게 좋음.

https://coolors.co/palettes/trending

컬러조합 볼 수 있는 사이트

Trending Color Palettes - Coolors

Get inspired by thousands of beautiful color schemes and make something cool!

coolors.co

class selector : Select elements with class of 'complete' class는 같은 이름을 여러번 쓸 수 있음. id보다 class를 쓰는 경우가 더 많이 생길 것.

.class{ //class를 부를때는 .을 찍어야한다
	color : black;
}

#자손선택자

Descendant selector : select all <a>'s that are nested inside an <li>
,콤마로 연결하게 되면 <li>, <a> 이렇게 두개를 선택하는 경우가 되는거지만, <li>에 종속되어 있는 <a>태그를 고르려면 꼭 띄어쓰기로 연결을 해야한다.

li a {  // space(띄어쓰기)가 매우 중요함!
	color : teal;
}

큰 태그들을 연결연결 해서 자손을 선택하는 경우도 있지만, 그냥 영역별로 class를 줘서 그 class안에 있는 태그가 종속되도록 하는게 좋다

.post a{ //class를 준 뒤 그 안에 있는 <a>태그에 효과를 넣는다 
  color : #0081A7;
}

#인접선택자와 직계자손 선택자

Adjacent selector : select only the paragraphs that are immediately preceded by an <h1>. It is so called combinator. 얘는 부모자식관계라기보다 형제의 관계처럼 연결되는 선택자다.
<h1>태그 다음에 오는 <p>태그의 스타일을 바꾸는 것이다.
만약 <h1> 태그 다음에 오는 <p>태그가 여러개라면 모두 동시에 적용된다.

h1 + p{
	color : red;
}

Direct child : select only the <li>'s that are direct children of a <div>element. just one level down, not choose all <li>tags.

div > li {
	color : white;
}

  <footer>
    <nav>
      <ul>
        <li><a href="">home</a></li>  // 얘네는 자식의 자식태그라 적용이 안됨
        <li><a href="">About</a></li>
        <li><a href="">contact</a></li>
        <li><a href="">puppies</a></li>
      </ul>
    </nav>
    <a href="">google.</a>  //footer태그안에 바로 나오는 자식태그라 해당됨
  </footer>

#속성 선택자

Attribute selector : Select all input elements where the type attribute is set to 'text'.
<input>태그 중에서도 type별로 설정해서 스타일링할 수 있음.

input[type="text"]{
	width : 300px;
    color : yellow;
}

section[class="post"]{
	backgorund-color : purple;
}

post라는 class가 있는 section만 고를 수도 있다

section.post{
  background-color: #be95c4;
}

특정단어가 들어간 태그만 골라서 스타일을 설정하거나 할수도 있음. 자주 쓰지는 않으니 필요하면 MDN 문서를 찾아보고 활용하자

#유사클래스

Pseudo classes : keyword added to a selector that specifies a special state of the selected element(s).
가상클래스는 선택자 끝에 붙여 상태를 특정하는 키워드다. : 표시와 함께 사용한다.
가장 흔하게 볼 수 있는건 : hover -> 얘를 적용하면 특정 태그위에 마우스를 올려놨을 때 스타일을 변하게 할 수 있다. 가장 많이 볼 수 있는건 <a>태그 위에 마우스를 얹으면 색이 변하거나, 선이 생기는경우!
아래처럼 코드를 작성해주면 마우스를 올렸을 때, 버튼 색은 파랑색, 글자는 흰색으로 바뀐다.

button:hover{
  background-color : blue;
  color : white;
}

좀 더 구체적으로 태그를 지정할 수도 있다. 특정 class가 들어있는 태그에 hover를 입히면 됨.

.post button:hover{  //post라는 class를 가진 버튼에 hover 적용
  background-color : blue;
  color : white;
}

:active -> 무언가가 현재 활성화 되어있도록 만드는 것. 마우스로 버튼을 클릭하고 띄기 전에 클릭한 상태에서의 스타일링이 가능하다.

.post button:active{
  background-color: green;
}

여러가지의 동일한 태그들이 있다고 할때, (ex) 트위터처럼 여러개의 트윗이 연달아 나오는 경우) n번째 순서에 해당하는 부분만 스타일링 가능.
그냥 3만 입력하면 3번째에 있는 애만 변하지만, 3n으로 작성해주면 3의 배수에 맞게 변경된다.

.post:nth-of-type(3n) {
  background-color : greenyellow;
}

#유사요소

Pseudo elements : Keyword added to a selector that lets you style a particular part of selected element(s).
pseudo class와는 다른 개념. 유사요소는 어떤 요소의 첫 줄의 첫 글자에만 스타일을 넣을 수 있는 식으로 작동함.
MDN페이지에서 pseudo elements를 검색해보면 flask 모양이 있는 애들이 있따. 시험용이라는 뜻으로, 개발코드로 사용하지 말라고 알려주는 것.
또 MDN문서에는 세미콜론을 두개쓰라고 되어있지만, 사실 한개만 써도 작동함. (크롬에서는.. 다른 브라우저는 한번 확인해봐야함 )
: first-letter : 모든 단락이나 모든 스팬의 첫 글자를 선택할 수 있는 것.

h2:first-letter{
  font-size: 50px;
}

:first-line : 첫 줄 전체를 스타일링 할 수 있음

p::first-line{
  color: purple;
}

: selection : 마우스로 선택을 했을 때 부분을 스타일링 할 수 있음

p::selection{
  background-color: yellow;
}

문서 전체에 스타일을 적용하고 싶으면 유사요소만 넣으면 됨

::selection{
  background-color: yellow;
}

#계단식 CSS

The cascade : The order your styles are declared in and linked to matters !
최상단에서 흐른 물이 아래로 흘러가듯이, CSS에서는 선언된 순서가 중요함. css 파일 가장 하단에 선언된 스타일이 브라우저에 반영된다.
만약 <link>에 걸려있는 css 파일이 두 개라면, 더 밑에 걸려있는 css파일의 스타일이 우선 적용됨.

#우선순위 CSS

What happens when conflicting styles target the same elements? Here specificity comes out
Specificity : Specificity is how the browser decides which rules to apply when multiple rules could apply to the same element.
여러개의 css 스타일이 쓰여진다면, 브라우저는 더 구체적인 선택자를 우선적으로 적용한다.

p{
	color: yellow;
}

section p{
	color : teal;
}

// 아래에 적힌 코드가 더 구체적으로 section의 p를 선택하라고 되어 있다. 이 상황에선 더 구체적은 아래의 코드가 적용된다

Id > class > element 순으로 specificity가 정해진다. 어떤 클래스 보다도 id가 제일 구체적인 것.
https://specificity.keegan.st/ 를 통해서 특이도를 계산해 볼 수 있다.
이건 충돌하는 요소가 있을때만 우선순위가 적용된다, 만약 두 태그 모두 백그라운드 컬러를 바꾼다면 우선순위를 따져서 더 우위에 있는 애가 적용될 것이고, 하나는 폰트컬러를 바꾸지만, 다른건 폰트컬러를 건드리지 않는다면 폰트컬러는 우선순위와 상관없이 그대로 적용된다.

#인라인 스타일과 중요도(얘네는 쓰지 말자)

id 값이 가장 우위에 있는 값이라고 배웠지만, 사실 가장 우위에 올라가는건 인라인 스타일이다.
인라인 스타일은 html 파일에서 바로 스타일을 입히는 것

<button style="color:coral">+view</button>

이런 인라인 스타일은 안쓰는게 가장 좋음. css파일과 분리되어 있기 때문에 혼란을 일으키기 쉽다.
!important : 얘를 코드 뒤에 써주면 모든 우선순위는 다 사라지고 얘가 제일 첫번째 우선순위에 들어가게 된다.

::selection{
  background-color: yellow !important;
}

#상속 CSS

태그가 여러개 중첩되어 있을 때, 상위태그에만 css 스타일링이 적용되어 있다면 그 스타일 요소가 상속되어서 안에 종속되어 있는 태그에도 스타일이 적용될 수 있다.
개발자도구로 inspect해보면 상속되어 있는걸 찾을 수 있음 .
하지만 몇가지 요소들은 상속을 받지 않는게 디폴트로 되어있는 경우도 있다.
상속받지 못한 요소에도 상속을 받게 만들고 싶다면, inherit로 상속시켜 줄 수 있다.

button{
	color : inherit;
}

하지만 모든 요소가 상속을 받을 수 있는건 아님. MDN문서를 보면 inherited 부분에서 상속여부를 확인할 수 있음.

'Udemy - The web developer camp' 카테고리의 다른 글

JavaScript (0)	2022.07.30
가격표만들기 (0)	2022.07.26
css 3 (flexbox) (0)	2022.07.21
CSS 2 (0)	2022.07.08
HTML (0)	2022.06.19

하나의개발일지

CSS

#스타일을 설정하는 법

#색 및 배경색 속성

#RGB와 알려진 색상

#16진법

#일반 텍스트 속성

# 픽셀로 글꼴 크기 지정하기

#글꼴집합

#CSS Selectors(★★★★★)

#자손선택자

#인접선택자와 직계자손 선택자

#속성 선택자

#유사클래스

#유사요소

#계단식 CSS

#우선순위 CSS

#인라인 스타일과 중요도(얘네는 쓰지 말자)

#상속 CSS

'Udemy - The web developer camp' 카테고리의 다른 글

댓글

티스토리툴바

CSS

#스타일을 설정하는 법

#색 및 배경색 속성

#RGB와 알려진 색상

#16진법

#일반 텍스트 속성

# 픽셀로 글꼴 크기 지정하기

#글꼴집합

#CSS Selectors(★★★★★)

#자손선택자

#인접선택자와 직계자손 선택자

#속성 선택자

#유사클래스

#유사요소

#계단식 CSS

#우선순위 CSS

#인라인 스타일과 중요도(얘네는 쓰지 말자)

#상속 CSS

'Udemy - The web developer camp' 카테고리의 다른 글

관련글

댓글

티스토리툴바