이번에도 마찬가지로 인터넷 강의를 들으면서 쭈루루루룩 기록만 하는 식입니다.
CSS
CSS(Cascading Style Sheets)는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일언어이다. HTML과 XHTML에 주로 쓰이며 XML에서도 사용할 수 있다. HTML과 같은 마크업 언어가 몸체를 담당한다면 CSS는 옷과 악세사리처럼 꾸미는 역할을 담당한다.
먼저 어떻게 하면 CSS를 HTML 페이지에 추가할 수 있는지 이해를 해야한다. 첫 번째 방법은 같은 HTML 파일에 HTML 코드와 CSS 코드를 같이 작성하는 것이다. 두 번째 방법은 대부분의 사람들이 추천하는 방법으로 CSS와 HTML 코드를 따로 분리해서 놓는 것이다.
<!-- html 파일 안에서 직접 작성하기 -->
<!DOCTYPE html>
<html lang="kr">
<head>
<title>Home - My first website</title>
<style>
</style>
</head>
<body>
<header>
<h1>123</h1>
</header>
<main>
<p>hello!</p>
</main>
<footer>
© 2020 N.C
</footer>
</body>
</html>
<!-- html 파일과 css 파일을 분리하여 작성하고 연결하기 -->
<!DOCTYPE html>
<html lang="kr">
<head>
<title>Home - My first website</title>
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<header>
<h1>123</h1>
</header>
<main>
<p>hello!</p>
</main>
<footer>
© 2020 N.C
</footer>
</body>
</html>위 예제에서 보듯이 두가지 방법 모두 head태그 안에서 이루어져야 한다. 첫 번째 방법은 style 태그 안에서 CSS 코드를 작성하는 것이고 두 번째 방법은 link태그를 통해 CSS 파일을 연결하는 것이다.
CSS 작성 규칙
CSS는 HTML 태그를 가리키는 일을 한다. ex) 이 태그는 초록색이다. 이렇게 가리키는 것 자체를 selector라고 한다. 그 selector 안에서 글씨 크기는 25px이고 색깔은 blue이다 이런 것들을 property라고 한다. 원하는 태그를 지정하고 원하는 속성값을 사용하면 된다. 속성 이름은 띄어쓰기 및 언더바(_), 슬래시(/) 등이 존재하면 안된다. 하이픈(-)으로는 연결될 수 있다. 그리고 속성의 각각의 줄은 세미콜론(;)으로 끝나야 한다. 속성 이름 다음에는 속성 값을 써야한다.
<!DOCTYPE html>
<html lang="kr">
<head>
<title>Home - My first website</title>
<style>
h2 {
color: blue;
text-decoration: underline;
font-weight: 300;
font-style: italic;
font-size: 50px;
}
main {
text-align: center;
color: tomato;
}
</style>
</head>
<body>
<header>
<h2>jeongwle times</h2>
</header>
<main>
<p>hello!</p>
</main>
<footer>
© 2020 N.C
</footer>
</body>
</html>
Blocks and inlines
1. box(div, header, main, section, footer, article ...). 어떤 box를 만들든 그 옆에는 아무것도 오지 않는다.
2. span, link, img 처럼 바로 옆에 다른 요소들이 올 수 있는 것들도 있다.
1번과 같은 요소들을 block이라 부르고 다른요소가 옆에 올수 있는 것들을 inline이라 부른다. 이것을 알아두면 나중에 디자인을 하거나 레이아웃을 다룰때 큰 도움이 된다고 한다.
inline은 높이와 너비를 가질 수 없고 block은 높이와 너비가 있다.
block요소를 inline 요소로 변경이 가능하고 그 반대 또한 가능하다.
block의 3가지 속성(property)
1. margin
margin은 박스의 경계(border) 바깥에 있는 공간을 말한다.
margin: 20px; 값이 하나인 경우 상하좌우 모두 20px로 적용한다는 의미이다.
margin: 20px 15px; 값이 두개인 경우 20px는 위, 아래, 15px는 왼쪽, 오른쪽으로 인식한다.
margin: 20px 15px 10px 5px; 값이 네개인 경우 위부터 시계방향으로 위, 오른쪽, 아래, 왼쪽 순으로 적용된다.
주의할 점 : collapsing margins (위 아래쪽에서만 일어남 상위 block의 위와 아래부분이 하위 block의 위와 아래와 겹칠 때 생기는 현상 -> 둘의 위 아래 마진이 하나로 취급된다.) 너무 깊게 생각하지 말고 이런게 있다는 것 정도만 알아두면 된다고 한다.
2. padding
padding은 박스의 경계(border) 안쪽의 공간을 말한다.
padding 또한 value 값을 넣을 때 margin과 같은 원리로 동작한다. 값이 하나일 경우, 둘일 경우 등등
padding이 무엇인지와 태그에 아이디를 부여했을때 어떻게 select해서 css코드를 작성하는디 등에 대한 예시를 밑에 코드로 남겨두겠다
<!DOCTYPE html>
<html lang="kr">
<head>
<title>Home - My first website</title>
<style>
html {
background-color: tomato;
}
body {
background-color: thistle;
margin: 20px;
padding: 20px;
}
div {
height: 150px;
width: 150px;
padding: 10px;
}
#first {
background-color: whitesmoke;
width: 150px;
height: 150px;
}
#second {
background-color: teal;
width: 100px;
height: 100px;
}
#third {
background-color: wheat;
width: 50px;
height: 50px;
}
#fourth {
background-color: blanchedalmond;
width: 25px;
height: 25px;
}
</style>
</head>
<body>
<div id="first">
<div id="second">
<div id="third">
<div id="fourth"></div>
</div>
</div>
</div>
</body>
</html>
html 블럭을 사용하면 tistory css까지 건드려버려서 올릴 수가 없다. 대충 위와 같은 사진의 그림이 나오는데 관리자 도구를 켜서 margin과 padding을 눌러보면서 확인해보면 좋을 것 같다.
3. border
border은 말 그대로 box의 경계선이다.
border에 value를 주는법 -> border: 2px(size), solid(style), black(color)
스타일은 이곳에서 찾아 볼 수 있다.
inline
inline은 border도 적용되고 padding도 적용되지만 margin은 좌우로만 가질 수 있다.
Box 옆에 또 Box를 배치하는 법(Flexbox)
프로퍼티로 display를 설정할 수 있는데 display: inline-block은 문제가 많으므로 사용하지 않는다.
flexbox를 이용해서 box 옆에 box를 배치할 수 있다. flexbox를 사용하기 위해서는 세가지 규칙을 따라야 한다.
첫 번째 규칙은 자식 엘리먼트에 어떤 것도 적지 말아야 한다는 것이다. 부모 엘리먼트에만 명시해야 한다.
<body>
<div></div>
<div></div>
</body>
이렇게 있을 경우 css 코드를 div에 적용하지 않고 body에 적용해서 box옆에 box를 배치할 수 있게 한다는 뜻이다. 그래서 box들을 우리가 원하는 곳으로 움직이게 하기 위해서는 부모 엘리먼트를 flex container로 만들어야 한다. 이를 위해 부모 엘리먼트에 display: flex;를 적어주면 된다.
두 번째 규칙과 세 번째 규칙은 주축(main axis)와 교차축(cross axis)이다.
주축의 default 값은 수평이고 교차축의 default 값은 수직이다. default 값이 존재한다는 것은 바꿀 수 있다는 말이기도 하다.
justify-content 는 주축에 적용이되고 align-items 는 교차축에 적용이 된다.
만약 여기서 body의 height이 설정되어 있지 않다면 body의 height은 박스의 height이 되므로 align-items 를 설정하더라도 적용이 되지 않을 수 있다. 박스가 이미 맨 위 아래를 차지하고 있기 때문이다.
position property
1. position: fixed
스크롤을 내려도 계속 고정된 위치에 박스가 존재한다. 박스가 고정된 위치는 초기에 위치한 자리이다.
※ top, right, bottom, left 넷중에 하나만 고쳐도 다른 layer로 바뀐다.
2. position: static(default)
레이아웃이 박스를 처음 위치하는 곳에 두는 것을 말한다고 한다.
3. position: relative
top, right, bottom, left를 이용해서 아주 조금씩 위치를 옮기는 데 유용하게 사용할 수 있다. 엘리먼트가 처음 위치한 곳을 기준으로 위치를 수정한다.
4. position: absolute
position: absolute인 박스의 부모박스가 postion: relative인지 확인하고 아니라면 position: relative인 부모를 찾기위해 더 상위로 올라가게 되고 relative인 부모를 찾았을 경우 그 부모의 크기를 기준으로 맨 위, 아래, 오른쪽, 왼쪽으로 absolute 박스를 움직이게 한다.
음.... 조금 완벽하게 이해한 것 같지는 않다.
pseudo selector
pseudo selector 또한 종류가 무수히 많고 전부 외울 수는 없다. 필요할 때 검색해서 찾아 사용해야 할 것 같다.
음.. 설명을 제대로 못하겠으니 이미지로 기록을 해볼까 한다.
combinator
State
:active -> 버튼을 누르고 있을 때 색이 변한다.
:hover -> 버튼위에 마우스를 대면 색이 변한다.
:focus -> 키보드로 탭으로 움직이다가 선택되면 색이 변한다.
:visited -> link에만 적용된다.
:focus-within -> focus된 자식을 가진 부모 엘리먼트의 상태를 말한다. 밑에 사진 두개를 보고 이해해보자.
Color 표기법
color를 표기하는 방법에는 3가지가 있다.
계속 써오던 것처럼 색상명을 적는 것과 hex로 나타내는 것과 rgb로 나타내는 것 세가지가 있다. 이중에 rgb는 rgba로 해서 a부분에 0~1까지의 값을 줘서 투명도를 설정할 수 있다.
Variable 사용법
:root {
--main-color: #9acd32;
... your custom property
}
p {
color: var(--main-color);
}
div {
background-color: var(--main-color);
}루트는 모든 문서의 출발점이 된다. 여기서 property를 custom해놓으면 Variable을 이용해서 유용하게 사용할 수 있다. custom property를 작성할 때도 규칙이 존재한다. --으로 시작하여야 하고 단어사이를 하이픈(-)으로 연결해야 한다. 띄어쓰기나 다른 문자들은 사용하면 안된다.
맛보기는 여기서 끝났다. 정말 기초적인 것만 배우면서 어떻게 사용해야하는 지 이해하는 정도만 가르쳐 준 것 같다. 검색과 실습을 통해 숙련도를 끌어올리는 것은 이제 본인의 몫인 것 같다.
'Study > ft_transcendence' 카테고리의 다른 글
| [React] 22.07.11 회고록 (0) | 2022.07.11 |
|---|---|
| [CSS] CSS 조금 더 깊게 맛보기 (노마드 코더) (0) | 2022.06.17 |
| [Html] html 맛보기(노마드 코더) (0) | 2022.06.07 |
| [UI / UX] UI 와 UX 란? (0) | 2022.06.06 |
| [Transcendence] 시작 (0) | 2022.06.02 |
댓글