출처
이걸 보고 정리했습니다!
생활코딩 CSS : 이 영상들을 보고 글을 썼습니다.
https://opentutorials.org/course/2418
HTML은 중첩된 구조를 갖고 있기 때문에 하나의 엘리먼트가 다양한 요소의 영향을 받게 된다. 따라서 여러 효과 중 어떤 효과를 엘리먼트에 적용해야할지 결정하기 위해 규칙들이 존재한다.
📌 상속
상속은 부모 엘리먼트의 속성을 자식 엘리먼트가 물려 받는 것을 의미함.
<div id="container">
<h1>수업순서</h1>
<ul>
<li>html</li>
<li>css</li>
<li>js</li>
</ul>
<h1>수업참가자</h1>
<ul>
<li>최진혁</li>
<li>최유빈</li>
<li>한이람</li>
<li>한이은</li>
</ul>
</div>위 코드에서 모든 텍스트의 색상을 하나로 통일한다고 할 때, 각각의 엘리먼트들을 하나하나 지정해주는 것이 아니라 상속을 이용해 효율적으로 작업할 수 있다.
html{color:red}위 코드는
:root{color:red}라고 써주는 게 더 좋다.
stylish
웹사이트의 디자인을 사용자 마음대로 수정할 수 있는 기능. 이 기능을 이용해서 자신의 취향을 반영할 수도 있고 다른 사람이 만든 디자인을 적용해 간편하게 사이트 디자인을 변경할 수 있다.
https://userstyles.org/
크롬 확장 프로그램
background-color: black !important;이 선언이 무조건 이기는 법 (남용은 권장하지 않음)
📌 캐스케이딩
Cascading Style Sheet
웹페이지의 디자인이 웹브라우저의 기본 디자인과 브라우저 사용자의 디자인, 그리고 웹페이지 저자의 디자인이 결합될 수 있다는 점에서 착안됨.
즉 웹브라우저, 사용자, 컨텐츠 생산자의 조화를 중요한 철학으로 삼고 있다.
하나의 엘리먼트에 대해 다양한 효과가 영향력을 행사하려고 할 때 우선순위를 어떻게 설정하는가에 대한 규칙
<!DOCTYPE html>
<html>
<head>
<style>
li{color:red;}
#idsel{color:blue;}
#idsel{color:yellow;}
.classsel{color:green;}
</style>
</head>
<body>
<ul>
<li>html</li>
<li id="idsel" class="classsel" style="color:powderblue">css</li>
<li>javascript</li>
</ul>
<ol>
<li>style attribute</li>
<li>id selector</li>
<li>class selector</li>
<li>tag selector</li>
</ol>
</body>
</html>- "css"에는 세 가지 색상이 동시에 적용된 상태인데, 어떤 스타일이 적용될까?
하나의 태그에 중첩해서 css가 적용됐을 때 우선순위는 다음과 같다.
스타일속성 > 아이디 셀렉터 > 클래스 셀렉터 > 태그 셀렉터
powderblue > yellow > green > red
좀 더 구체적이고 명시적인 스타일이 우선순위가 높다.
모든 우선순위를 뛰어 넘는 법
li{color: red !important;}가장 우선순위가 낮았던 li가 일등이 된다. (남용은 권장하지 않음)
brackets
브라켓은 어도비에서 만든 오픈소스 에디터로 html. css코딩을 하는 데 최적화된 도구.
📌 레이아웃
구획을 나누고 정보를 배치하는 것
(1) inline vs block
html엘리먼트는 크게 두 가지로 구분된다.
- block element: 화면 전체를 사용하는 태그
- inline level element: 화면의 일부를 차지하는 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h1,a{border:1px solid red;}
h1{display: inline;}
a{display:block;}
</style>
</head>
<body>
<h1>Hello world</h1>
안녕하세요. <a href="https://opentutorials.org">생활코딩</a>입니다.
</body>
</html>- h1태그: 줄바꿈이 된다 => 자기 혼자서 하나의 줄 다 쓰는 block 엘리먼트
- a태그: 다른 태그들과 같은 줄에 위치하고 있음 => inline 엘리먼트
inline과 block 설정은 명시적으로 바꾸어줄 수 있다.
display: inline혹은display: block을 사용하면 됨
(2) 박스모델
태그의 부피감을 지정한다.
각각의 태그들은 박스와 같은 모양으로 둘러싸여 있다.
<!DOCTYPE html>
<html>
<head>
<style>
p, a{
/* border: 테두리는 박스모델의 기준점을 정한다 */
border: 10px solid red;
/* padding: 20px만큼 테두리로부터 멀어짐 */
padding: 20px;
/* margin: 테두리와 다른 요소들 사이의 간격이 40px만큼 떨어짐 */
margin: 40px;
/* 한 줄을 다 안 쓰도록 지정 가능. height은 잘 안 쓰는 경우가 많다 */
width: 120px;
}
</style>
</head>
<body>
<p>
lorem ipsum dofad dfa lkdsfnw
dfafadf
</p>
<p>
dfak dfaldkfalnse fdlanflkejlnfaldksfe
</p>
안녕하세요. <a href="dkfadlkf.adlfj">생활코딩</a>입니다.
</body>
</html>박스모델은 인라인에 적용되지 않을 수 있다.
ex) width, height 는 inline에 적용안됨.
(3) box-sizing
박스의 크기를 화면에 표시하는 방식을 변경하는 속성
width와 height는 엘리먼트의 컨텐츠 크기를 지정하므로 테두리가 있는 경우에는 테두리 두께로 인해 원하는 크기를 찾기가 어렵다.
box-sizing 속성을 border-box로 지정하면 테두리를 포함한 크기를 지정할 수 있기 때문에 예측하기가 더 쉽다. 최근엔 모든 엘리먼트에 이 값을 지정하는 경우가 늘고 있다.
<!doctype html>
<html>
<head>
<style>
*{
box-sizing:border-box;
}
div{
margin:10px;
width:150px;
}
#small{
border:10px solid black;
}
#large{
border:30px solid black;
}
</style>
</head>
<body>
<div id="small">Hello</div>
<div id="large">Hello</div>
</body>
</html>box-sizing은 기본값이 content-box다. 이걸 border-box로 바꾸면 테두리를 포함한 크기가 지정된다.
+)*태그는 모든 태그를 의미한다.
(4) 마진겹침현상
margin-collapsing
상하 마진값이 어떤 상황에서 사라지는 현상.
테두리와 다른 엘리번트 사이의 간격인 마진이 사라지는 경우!!
<!DOCTYPE html>
<html>
<head>
<style>
h1{
border:1px solid red;
margin:100px;
}
</style>
</head>
<body>
<h1>Hello world</h1>
<h1>Hello world</h1>
</body>
</html>h1끼리 마진이 겹친다!
위 태그 아래 태그 마진 값 중 더 큰 값이 두 개의 태그 사이의 간격이 된다.
왜 이렇게 되냐면, 리스트 태그끼리 30마진을 주고 싶은데 마진겹침이 없다면 60마진이 되므로 보기 싫다. 그래서 있는 게 아닐까 추측이 있음
margin을 "이 요소를 10px만큼 움직여주세요"라기보다, "이 요소는 다른 보이는 인접한 요소와 10px 떨어져 있게 해주세요"라고 생각하면 쉽다고 하네요!
부모 엘리먼트 아래 자식엘리먼트가 있고 이 모두가 마진 값이 있는 경우에도 마진겹침현상이 발생할 수 있다.
<!doctype html>
<html>
<head>
<style>
#parent{
/* border:1px solid tomato;*/
margin-top:100px;
}
#child{
background-color: powderblue;
margin-top:50px;
}
</style>
</head>
<body>
<div id="parent">
<div id="child">
Hello world
</div>
</div>
</body>
</html>주석처리된 부분이 사라지면 마진겹침 현상이 나타난다. 부모태그가 시각적으로 아무런 효과도 없는 투명한 상태가 되면 자식태그와 부모태그의 마진값이 합쳐지는 결과가 난다.
부모엘리먼트가 투명한 상태일 때 부모 엘리먼트의 마진값과 자식 엘리 마진값 중 큰 쪽 마진값이 자식 엘리먼트의 마진값으로 사용된다. 이것이 부모자식 마진겹침현상
<!doctype html>
<html>
<head>
<style>
#empty{
margin-top:50px;
margin-bottom: 100px;
/* border:1px solid tomato;*/
}
#normal{
background-color: powderblue;
margin-top:100px;
}
</style>
</head>
<body>
<div id="empty"></div>
<div id="normal">normal</div>
</body>
</html>#normal이라는 태그의 margin-top과 #empty 태그의 margin-bottom이 마진겹침에 의해 오버랩됨.
어떤 엘리먼트에 시각적인 요소가 없고 margin-top, margin-bottom이 서로 다르면 (cf. top-bottom / left & right 치환해서 봐도 됨)
엘리먼트 혼자서 마진이 겹친다고 생각하면 됨
이 엘리먼트 혼자서 마진겹침은 top과 bottom중 margin 값이 큰 값을 취함
엘리먼트가 시각적인 요소가 있다면 위의 1과 똑같은 마진겹침
(5) position
엘리먼트의 위치를 지정하는 4가지 방법
- static
- relative
- absolute
- fixed
static vs relative
<!DOCTYPE html>
<html>
<head>
<style>
html{border:1px solid gray;}
div{
border:5px solid tomato;
margin:10px;
}
#me{
position: relative;
left:100px;
top:100px;
}
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
</body>
</html>
#me를 움직여보자
left는 왼쪽에 오프셋을 주는 것. top은 위에 오프셋을 주는 것.
position을 relative로 주어야 움직인다.
왤까?
엘리먼트들은 position의 기본값인 static을 갖고 있다. 그러면 각각의 엘리먼트는 left, top, bottom, right과 같은 오프셋 값을 무시하고 정적으로 위치하게 됨.
원래 자기가 위치해야하는 부모 엘리먼트 아래를 기준으로 해서 상대적으로 움직이게 하고 싶다면 position을 relative로 설정하면 된다. static은 위치와 관련된 설정을 하지 않은 상태
absolute
절대 position.
<!DOCTYPE html>
<html>
<head>
<style>
#parent, #other, #grand{
border:5px solid tomato;
}
#grand{
position: relative;
}
#me{
background-color: black;
color:white;
position: absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<div id="other">other</div>
<div id="grand">
grand
<div id="parent">
parent
<div id="me">me</div>
</div>
</div>
</body>
</html>#me 엘리먼트를 부모 엘리먼트가 아니라 경계에 있는 html 태그를 기준으로 해서 위치를 지정하고 싶을 수도 있다. 이런 경우에 absolute를 사용한다.
만약 오프셋이 없이 absolute면 #me가 부모 엘리먼트 기준으로 위치가 생긴다.
오프셋이 있으면 html 기준!
absolute의 left와 top은 0이 아니라 부모 기준 위치로 설정되어 있기 때문이다. 기본값은 원래 있기로 기대되는 곳!
어떤 엘리먼트를 absolute로 지정하게 되면 그 엘리먼트는 더 이상 부모의 소속이 아니다. 링크가 끊기면서 부모와는 무관해진다. 속성도 끊기면서 #me의 크기도 재설정해줘야 한다.
근데 grand처럼 position이 relative로 있으면 #me는 grand를 기준으로 위치가 설정되게 된다. 즉 static이 아닌 부모가 나타날 때까지 무시하다가 static이 아닌 부모를 만나면 그 부모의 위치를 기준으로 해서 오프셋 값을 갖게 된다.
=> 상대적인 것은 부모를 기준으로 해서 위치가 정해짐
절대적인 것은 부모 중 position 타입이 지정된 부모를 기준으로 위치가 지정되고 부모와의 관계성이 끊기므로 자신의 크기는 자신의 contents만해지고 부모 역시 자식을 무시한다.
fixed
<!DOCTYPE html>
<html>
<head>
<style>
body{
padding-top:30px;
}
#parent, #other{
border:5px solid tomato;
}
#large{
height:10000px;
background-color: tomato;
}
#me{
background-color: black;
color:white;
position: fixed;
left:0;
top:0;
text-align: center;
}
</style>
</head>
<body>
<div id="other">other</div>
<div id="parent">
parent
<div id="me">me</div>
</div>
<div id="large">large</div>
</body>
</html>absolute와 동일한 결과가 나오는 것처럼 보인다. 그러나 #me는 스크롤과는 무관하게 고정되어 있음!
특정한 엘리먼트를 화면의 그 위치로 고정시켜서 스크롤로부터 완전히 독립시키는 게 fixed이다.
fixed는 absolute와 비슷함. 부모가 없어지므로 자신의 부피가 컨텐츠의 크기가 됨.
flex
media query
float, multi column
좋은 글 감사합니다!