2021. 11. 13. 01:13ㆍNomadCoders/코코아 클론 챌린지
# 학습 전 나의 상태
오늘은 오전에 면접을 다녀왔다.
서울 사당에 있는 회사에서 면접의 기회를 주셨다.
솔직히 아직 진짜 부족하다.. 겸손이 아니라 진짜 어디가서 말 못할 만큼 부족한게 사실이다..
오늘 면접을 통해서 내가 어떤 것들을 공부하고 준비해야할지 좀 알게 되었다.
참 좋은 공부가 된 것 같다. 결과는 아무래도 좋지 않을 것 같다.
(답변도 못한게 많고 답변을 해도 이상했던 것 같다.)
아무튼 오늘부터 CSS를 공부하게 된다. 정신도 없고 이래저래 신경써야 할 것들이 많아서 집중 못했는데 바짝 집중해서 진도 팍팍 빼야겠다. 그래야 다음주부터 바닐라 JS 챌린지 도전할 수 있다..!! 어떤 직종이든 공부는 끝이 없는 것 같다.
오늘도 화이팅해보자 !!
# 오늘의 학습 내용
css를 html에 어떻게 추가할까?
1. .css 파일을 만들고 html <head>태그 안에 link로 불러온다.
2. <head>태그 안에 <style> 태그를 만들어 그 안에 작성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 방법1 -->
<link rel="stylesheet" href="/style.css" />
<!-- 방법2 -->
<style>
<!-- css 작성 -->
</style>
</head>
<body>
</body>
</html>나는 1번 방법을 더 선호한다. 이유는 html에 작성하면 너무 길어져 가독성에 문제가 생길 수 있어서이다.
css는 어떻게 작성될까?
selector {
property: value;
}
/*
가리치는 대상 {
속성이름: 속성 값;
} */- html의 어떤 태그를 가리키고 css로 잡아와서 사용한다.
- css 속성 이름에 띄워쓰기x -로 이어주고, 끝에 세미콜론(;)을 붙여야한다.
- 위에서 아래로 읽는다.
- 만약 두 css 코드가 같은 대상을 가리키게 되면?
- 위에서 아래로 읽어오다가 가장 마지막 것이 적용된다.
/* HTML */ <link rel="stylesheet" href="/style.css"> <style> h1{ color: red; } </style> /* style.css */ h1 { color: skyblue; }
/* HTML */ <style> h1{ color: red; } </style> <link rel="stylesheet" href="/style.css"> /* style.css */ h1 { color: skyblue; }
- 위에서 아래로 읽어오다가 가장 마지막 것이 적용된다.
blcok
- 옆에 아무 것도 올 수 없다. 아래로 쌓음
- div, p, address, header
- display: inline; 을 해주면 block -> inline으로 바뀐다.
- 높이와 너비를 가질 수 있다.
- Box
inline
- 같은 줄에 위치할 수 있다.
- span, image, a
- inline 도 display:block으로 바꾸면 block이 된다.
- 높이와 너비를 가질 수 없다.
- !box
margin, border, padding
- box가 가지고 있는 속정 중 하나
margin은 box의 border(경계)의 바깥에 있는 공간
box는 기본적으로 margin 값을 가지고 있다.
body {
/* 상하좌우 모두 10px 적용 */
margin: 10px;
/* 앞이 상하, 뒤가 좌우 10px 적용 */
margin: 10px 15px;
/* 상, 우, 하, 좌 순으로 적용 */
margin: 10px 5px 15px 0px;
}
Collapsible margins
- 흰 box에 margin 위 아래 값을 줬는데 핑크 box를 포함한 전체 box에 margin 위 아래 값이 적용되었다.
- 흰 box와 핑크 box의 경계가 같다면 두 margin이 하나로 취급된다.
- 이상하다!! 위 아래에서만 이런 현상이 발생한다.
# 학습을 마치며
오늘은 css의 구조부터 margin 까지 학습했다.
css를 만만히 봤던 과거가 떠오른다. 그냥 뭐 찾아서 하면되지! 했지만..
결국 내가 잘 이해하고 사용하느냐 그냥 복붙이냐에 차이가 크다는 것을 알아간다.
야매로 하지말고 암기하지는 못하더라도 속성 어떻게 적용되는지 이해하면서 학습해야겠다.
'NomadCoders > 코코아 클론 챌린지' 카테고리의 다른 글
| 2021. 11. 16. (화) 코코아 클론 - CSS_05 (0) | 2021.11.17 |
|---|---|
| 2021. 11. 16. (화) 코코아 클론 - CSS_04 (0) | 2021.11.17 |
| 2021. 11. 15. (월) 코코아 클론 - CSS_03 (0) | 2021.11.15 |
| 2021. 11. 13. (토) 코코아 클론 - CSS_02 (0) | 2021.11.13 |
| 2021. 11. 11. (목) 코코아 클론 - HTML (0) | 2021.11.12 |