SOCO
css 개괄 _21.05.29 본문
비전공자이며, 아직 시작한지 5일차입니다!
정식명칭이 아닌 것이 있을 수도 있어요!
제가 이해한대로 풀어쓰는 것이니 틀릴 수도 있고요!
틀린 부분이 있으면 알려주세요! 많이 배우겠습니다!
이번 포스팅은 CSS 개괄입니다. 다음 포스팅부터 구체적인 설명이 들어갑니다!
이 포스팅은 생활코딩님 CSS강의 내용을 기반으로 합니다!
html을 아름답게 꾸며주려면?
way1. 디자인에 대한 tag
way2. CSS
=> 아무래도 CSS를 많이 하는 것 같다! 왜냐면, 중복을 피할 수 있게 해주니깐!!
그리고 디자인 tag는 많이 사라지는 추세인 것 같습니다.
CSS사용을 위해 알아야하는 용어, tag
html을 사용할 때 tag(element)라는 용어를 알아야하듯,css를 사용하려면 알아야하는 용어가 있다
1. Selector(선택자), Property(속성), Value(값) 어떻게 사용되는지 예를 보면 쉽게 이해할 수 있다"해당 선택자의 속성으로 이런 값을 줘야지!" "해당 샐랙터의 프로펄티로 이런 벨류를 줘야지!"
| Selector 선택자 | Property 속성 | Value 값 |
| 내가 효과를 입히고 싶은 tag, class, id 정도로 생각하면 될 것 같다 | 어떤 특징을, 속성을 적용하고 싶은가! 글자 크기, 정렬, 색, 밑줄, 테두리 등 |
그 속성의 구체적인 값 |
| a, h1, ul, ol, p, div, span, .class_name, #id_name 등 | font-size, text-decoration, color, text-align, border, display 등 | 10px, none, green, center, solid, grid 등 |
2. block level element vs inline element
block level element는 해당 줄의 페이지 전체를 차지하는 tag를 의미한다.
즉 해당 tag를 쓰면 자동으로 줄바꿈이 되는 경우를 말한다.
ex. <h1>, <p>, <ul>, <ol>
inline element는 해당 테그가 적용되는 만큼(즉 열리고 닫히는 만큼)만 차지하는 tag를 의미한다.
즉 해당 tag를 써도 자동으로 줄바꿈이 되지 않고, 해당태그가 열리고 닫힌 만큼만 효과가 적용된다.
ex. <a>
3. class vs id
class와 id의 공통점은 이미 있는 태그에 새로운 선택자를 부여하는 것이라고 생각한다.
다만, class는 여러 개 태크에 넣을 수 있지만, id는 딱! 한 개의 태그에 넣어야한다는 점과
id > class > 일반 tag 순으로 적용 우선순위가 결정된다는 점에서 다르다
4. div vs span
div와 span의 공통점은 정말 아무런 의미, 기능 없이 묶어주는 기능을 한다는 것이다.
<div> </div>와 <span> </span>은 이 사이에 있는 내용을 하나의 묶음으로 묶어준다.
다만, div는 block level element지만 span은 inline element라는 점에서 다르다.
(즉 div로 묶어주면 바로 줄 바꿈이 되지만 span으로 묶어주면 줄바꿈이 되지 않는다)
그럼 class, id랑 div, span은 어떻게 다를까?
강의를 들으면서 이 부분이 궁금했는데, 별 다른 답을 찾지 못하다가
혼자 정의를 내려보았다.
class랑 id는 이미 tag로 묶여있는 뭉탱이에 새로운 이름의 선택자를 부여해주는 것이라면
div랑 span은 뭉탱이 자체를 만드는 것이다!! 이렇게 정리하니 어느 정도 이해가 되는 것 같다.
=> 결국 div가 뭉탱이를 만드는 것이니 div tag로 묶여있는 뭉탱이에 class랑 id를 넣을 수 있는 것이다!
<div class=" "> <div id=" " > 이런 식으로!
CSS를 사용하는 방법
| 1. <body>에 <style> 집어넣기 | 2. <head>에 <style> 집어넣기 | 3.<link> 사용 |
| 본문에 있는 내용 중 딱 그 부분에만 적용하고 싶은 경우 사용 | 해당 페이지에 있는 특정 tag에 다 적용하고 싶은 경우 | 여러 웹페이지에, 동시에 적용하려는 경우 |
CSS에서 특히 중요한 기능
아래에서 언급하는 기능을 사용할 때
내가 만들고 있는 웹사이트에서 마우스 우클릭 -> 검사 클릭 -> style을 살펴보면 더 정교하게 할 수 있다
1. BOX MODEL
box model을 통해 영역을 구분하는 선을 보여줄 수 있게 된다.사용되는 속성 border, width, height, padding, margin, display
2. grid
덩어리를 나란히 양 옆으로 놓고 싶을 때 사용하면 된다.
사용되는 속성 display : grid, grid-template-columns
3. 반응형 웹, 미디어쿼리
화면에서 보여지는 웹페이지의 크기에 따라 다른 디자인이 보여지도록 하는 것 등이 있다.
(제가 아직 배운 게 여기까지..!)
사용하는 방법 @media(max-width : ) or @media(min-width : )
여기서 max-width : 500px은 최대 폭이 500px일 때 적용한다는 것을 의미하므로
결국 500px이하에서 적용한다는 것을 의미한다.
같은 논리로 min-width :500px은 500px이상에서 적용한다는 것을 의미하는 것이다
'프론트 > css' 카테고리의 다른 글
| CSS _ border 속성에서 내가 실수한 것들 (0) | 2021.06.01 |
|---|