생활코딩 : WEBn > WEB2 - CSS 내용 정리

CSS를 먹이는 3가지 방법

  1. Inline Styles : html attribute(style) 속성 이용
  2. Internal Style Sheet : style tag, selector, declaration, property, value 이용
  3. External Style Sheet : 하나의 .css 파일을 만들어 style tag, selector, declaration, property, value 이용
[참고 사이트]
W3S CSS How to... Reference

1. html attribute(style) 속성 이용

<h1 style=text-align:center;color:blue>생활코딩 : WEBn > WEB2 - CSS 내용 정리</h1>

이런식으로 제목에 CSS를 줄 수 있었다.

2. style tag, selector, declaration, property, value 이용

head 태그 안에 style 태그, 선택자 선언하고 속성을 줄 수 있다.

<head>

<style> - style tag
h1 { - selector(선택자)
text-align : center; - declaration(선언, 효과)
property(속성) : value(값)

color:blue
}

</style>

</head>

selector(선택자) 종류

CSS Selector Reference

기억할 것은 선택자가 먹히는 우선순위(selector's priority)가 id(#) > class(.) > tag 라는 사실!

또한, #id tag 라던가 .class #id 같이 부모 자식 관계를 선택자로 표현하여 특정한 선택자를 지칭할 수 있다.

그리고 밑에서 보겠지만 같은 선택자 여러개를 선언했다면 나중에 선언한 효과가 우선순위가 높다.

declaration(선언, 효과) 종류

property는 검색해서 찾으며 쓰기! 외울 것이 아니다!

색 변경 : color:black;

밑줄 제거 : text-decoration: none;

글씨 크기 : font-size:45px;

정렬 : text-align:center;

박스모델

block level element
ex)h1 tag

inline element
ex)a tag

margin - border 밖 공간

pading - border 안 공간

border:5px solid red; - 하나의 속성에 값이 여러개인 효과, 선언

margin pading border 등은 크롬 도구를 이용해서 보면 더욱 정확히 볼 수 있다.

그리드

디자인이라는 목적을 위해 어떤 의미도 없는 태그를 써야할 경우가 있다!

1. 그것이 바로 <div> tag 이다. (div tag는 기본적으로 block level element 이다.)

2. 같은 의미의 <span> tag 가 있다. (span tag는 기본적으로 inline element 이다.)

아래는 div 태그에 grid 속성을 이용하여 이용하여 표를 만든 것이다.
NAVIGATION
NAVIGATIONsafndsnfkjsak;flskdjflkajlksjfl;asflkjsa;lfjsld;kafweefoiweh;oiaf


아래는 위 표를 만드는 소스이다.

특이한 것은 나중에 먹인 효과가 우선순위가 높게 적용되므로
.saw와 .active 중 .active의 red 컬러가 글씨에 적용된 것을 볼 수 있다.
<head>
<style>
#grid {
border:5px solid pink;
display:grid;
grid-template-columns: 150px 1fr;
}

div {
border:5px solid gray;
}

.saw {
color:gray;
}

.active {
color:red;
}
</style>
</head>

<body>

<div id="grid">
<div>NAVIGATION</div>
<div>NAVIGATION</div>
<div>
</body>


grid-template 속성에 fr 값을 사용하면 텍스트 길이에 따라 커지고 작아진다.

하지만 grid는 최신 기술이기 때문에
전세계의 브라우저들이 얼마나 채택하고 있는지 확인해보고 사용하면 좋다.

아래는 CSS HTML JS 등의 기술들을 브라우저들이 얼마나 채택하고 있는지 한 눈에 보여주는 사이트이다.

https://caniuse.com/

반응형 디자인

media 태그를 이용한다.

<style>
div{
border:10px solid green;
font-size:60px;
}

@media(min-width:800px) { - if (width > 800)
@media(max-width:800px) { - if (width < 800)
div{
display:none;
}
}
</style>

CSS 코드의 재사용

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

이런식으로 CSS를 외부 파일을 불러와 적용할 수 있다.

kcar app 실행 하기