개발일지
베이스캠프 6일차 본문
5일 차는 마지막 과제가 있어서 여기에 같이 쓴다
5일 차 과제는 초반에 만들어둔 회원가입 폼에 자바스크립트 기능도 추가해서 하는 작업이다 반절 정도 하다가 모르는 부분이 너무 많아서 레퍼런스 코드를 보면서 마무리했다
자바스크립트 알고리즘 문제도 더 풀어봐야하는데 아직도 감이 안 잡힌다 알고리즘 문제는 하루에 하나씩이라도 풀어보고 풀었던 문제도 다시 보자
오늘부터 css 강의가 시작된다
css
웹 브라우저가 읽을 수 있는 언어는 HTML,CSS,JS 세 가지 언어뿐입니다. 세 가지 언어 중 HTML은 문서 구조를 담당하고 있습니다.
CSS는 단순한 문서 형태인 HTML을 예쁘게 꾸며주고 구조를 잡아주는 역할을 합니다.
왼쪽과 오른쪽 이미지의 차이가 느껴지시나요?
이렇게 CSS는 페이지의 요소들이 어디에 위치해야 하는지 레이아웃 구조를 잡아주며,요소 하나하나를 개성 있고 사용이 편리하도록 꾸며주는 역할을 합니다
웹페이지를 집으로 예를 들어보면 기본구조 뼈대 집에 방은 몇 개 거실은 어느 정도 크기 화장실은 어디 이런 식으로 기본구조를 html이고 벽에 벽지나 가구 배치 등 세부 인테리어를 결정하는 거처럼 html에 꾸며주는 게 css이다
javascript는 문을 열얻다 닫는 조명을 껐다 키는 동작 요소를 결정한다.
css 기본 사용법
css작성 하는법
CSS를 기본 구조는 위와 같습니다.
먼저 CSS 구문은 선택자(Selector) , 선언(Declaration)으로 구분됩니다. 그리고 선언은 다시 속성(property) , 속성 값(property value)의 구조를 가지고 있습니다.
선택자는 어떤 HTML 요소를 선택해서 스타일을 적용할 것인지 지정합니다.
선언은 구체적으로 어떠한 스타일을 선택자에 적용할 것인지 지정합니다. 이 선언은 속성과 속성 값으로 이루어져 있는데, 속성은 적용하고자 하는 스타일의 종류를, 속성 값은 해당 속성을 정확하게 어떤 값으로 지정할 것인지를 결정합니다.
HTML 문서와 CSS를 적용하는 방법에는 크게 3가지가 있습니다.
1. inline style 작성하기
인라인 CSS란 해당 태그에 직접 style 속성을 추가해주는 것입니다.
<div style="background-color: red;">DIV 입니다</div>
이와 같이 div 같은 태그에 직접 style속성을 주어 css를 작성할 수 있습니다.
이 방법은 간편하지만 적용해야 할 스타일이 많아지면 가독성이 떨어지며, 유지보수가 어렵다는 단점이 있습니다.
2. <style> 태그 사용하기
style 태그는 html 파일의 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>
**<style>
div{
background-color: red;
}
</style>**
</head>
<body>
**<div>div 입니다</div>**
</body>
</html>
이 방법 역시 처음에는 편할 수 있지만 나중에 적용되는 스타일이 많아지면 유지보수에 불리할 수 있습니다.
3. CSS 파일 분리하기
파일을 분리하게 되면 HTML 파일과 연결해주는 작업을 따로 해주어야 합니다.
실무에서 많이 활용하는 방법
연결해주는 작업은
<link> 태그
로 하게 됩니다.
분리한
//파일 확장자를 css로 만들어준다 그리고
//html파일이 있는 폴더에 css만 모아놓은 //폴더를 만들어놔서 찾기 쉽게하면좋다
index.css
// 링크 태그는 head태그 안에 있어야 합니다.
//
<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>
<style>
div{
color: red;
}
</style>
**<link rel="stylesheet" href="./index.css">**
</head>
<body>
<div>div 입니다</div>
</body>
</html>
- href : 참조할 css파일 경로를 적어줍니다.
- rel : 해당 파일과의 어떤 관계(relation)인 지지 정해 줘서, "stylesheet"라고 적어주시면 됩니다.
- type : link태그로 연결되는 파일이 무엇인지 알려주며 "text/style"를 적어주시면 됩니다.
css 선택자
태그, id, class 선택자 3가지가 있다
CSS 선택자 중 가장 기본이 되는 것은 태그, id, class 선택자입니다.
1, 태그 선택자
태그 선택자는 앞에 붙여 무언갈 따로 붙여줄 필요 없이 태그명만 적어주시면 됩니다.
/* 태그 선택자 사용방법 */
태그 {
property(속성) : property value;(속성값)
}
/* 사용 예시 */
div {
background-color : red;
}
같은 태그가 있다면 한 번에 같은 속성을 줄 수 있음
2, ID 선택자
id 선택자는 앞에 #을 붙인 뒤 id명을 적어주시면 됩니다.
id는 고유한 이름으로 특정한 하나만 선택 가능
/* id 선택자 사용방법 */
#id {
property : property value;
}
/* 사용 예시 */
#title {
font-size : 24px;
}
3, class 선택자
class 선택자는 앞에. 을 붙인 뒤 class명을 적어주시면 됩니다.
id 외에 class도 부여 가능 id는 하나 태그에만 사용 중복으로 사용불가 class는 중복으로 사용 가능
/* class 선택자 사용방법 */
.class {
property : property value;
}
/* 사용 예시 */
.box {
border : 2px solid red;
}
부모 자식 , 다중 선택자
선택자 사이의 공백 유무에 따라 자손 선택자와 다중 선택자로 나뉩니다.
1. 자손 선택자
HTML 문서에는 부모 자식 개념이 존재합니다.
여러 개의 선택자를 공백으로 연결해서 작성하면 자손 선택자가 됩니다.
자손 선택자를 이용하면 특정 부모 요소 안에 있는 자식 요소만 선택할 수 있습니다.
/* 자손 선택자 사용방법 - 부모태그 선택자 안에 있는 자손태그 선택자를 써주면. */
부모태그 선택자 자손태그 선택자 {
속성 : 속성값
}
/* 자손 선택자 사용예시 - .box 안에 있는 공백을 주고 title을 선택한다. */
.box title {
color : red
}
자손 선택자 작성 시 한 칸 띄어서 사용 공백이 있어야지 실행이 된다
2. 다중 선택자
여러 개의 선택자를 공백 없이 연결하면 다중 선택자로 사용할 수 있습니다.
다중 선택자는, 중첩된 선택자들을 모두 만족하는 요소를 선택합니다.
자손 관계가 불분명한 경우 다중 선택자 사용
태그, class, id 선택자를 혼용해서 사용 가능
/* 다중 선택자 사용방법 */
.선택자1#선택자2 {
속성 : 속성값
}
/* 다중 선택자 사용예시 - .box 이면서 동시에 #title인 요소를 선택한다. */
.box#title {
color : red
}
폰트 기본 스타일
- font-size : 폰트의 사이즈를 조절하는 속성입니다.
- font-weight : 폰트의 굵기를 조절하는 속성입니다.
- font-style : 글자의 모양을 정하는 속성으로 기울임 여부를 정합니다.
- test-decoration : 텍스트에 장식용 선을 추가합니다.
- color : 폰트의 색상을 변경해주는 속성입니다.
BOX모델
모든 HTML 요소는 박스(box) 모양으로 구성되어있습니다. 우리는 이것을 박스 모델(box-model)이라고 부릅니다.
박스 모델은 HTML 요소를 패딩(padding) , 테두리(border) , 마진(margin) 그리고 내용(content)으로 구분합니다.
- content : 요소의 실제 내용이 차지하는 영역
- padding : 내용과 테두리 사이의 간격, 내부 여백에 해당합니다.
- border : 내용과 패딩을 감싸는 테두리
- margin : 테두리와 이웃하는 요소 사이의 간격, 외부 여백에 해당합니다.
- box-sizing : 요소의 너비와 높이를 계산하는 방법을 지정합니다.
box-sizing
box-sizing 속성에는 크게 두 가지 속성 값이 존재합니다.
- content-box : Content 영역을 기준으로 box의 size를 적용합니다. (기본값)
- border-box : Border 영역을 기준으로 box의 size를 적용합니다.
inline 요소 , block 요소
div, p, span, h1, h2 등 수많은 HTML 태그는
전통적으로 블록 요소와 인라인 요소 두 가지로 분류됩니다.
block 요소 :
블록 요소를 여러 개 연속해서 쌓을 경우 자동으로 다음 줄로 넘어간다.
좌우 양 쪽으로 늘어나 부모 요소의 너비를 가득 채운다.
inline 요소 :
여러 개의 요소를 연속해서 입력해도 자동으로 다음 줄로 넘어가지 않는다.
태그에 할당된 공간만큼의 너비만 차지한다.
심화 학습 주제!
시멘틱 태그 (Sementic tag) HTML4까지는 요소들을 inline vs block으로 구분했지만, HTML5와 시멘틱 웹(Sementic Web)이 도입되면서 더 이상 요소를 inline vs block으로 구분하지 않습니다. 대신 플로우 콘텐츠, 프레이징 컨텐츠, 섹션 컨텐츠, 헤딩 컨텐츠 등의 분류를 사용합니다.
하지만 요소의 특성을 알고 css를 컨트롤하기 위해서는 inline vs block 개념을 우선 파악해야 하기 때문에, 해당 분류로 소개를 드린 것입니다. inline vs block 구분에 익숙해지면 하단의 문서를 참고하셔 시멘틱 태그와 시멘틱 웹에 대해서도 공부해보세요!
https://www.w3schools.com/html/html5_semantic_elements.asp
HTML Semantic Elements
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
기본 선택자
CSS에서는 선택자를 통해서 속성을 줄 대상을 지정한다고 배웠습니다. 그리고 몇 가지 기본적인 선택자(태그,. 클래스, #아이디)에 배우고
기본 선택자 이외에 전체 선택자, 그룹 선택자, 가상 클래스 선택자에 대해 알아보도록 하겠습니다.
전체 선택자
전체 선택자는 HTML의 모든 요소를 선택합니다.
//곱하기 표시
*{
property(속성) : property value
}
그룹선택자
그룹 선택자는 여러 선택자를 그룹으로 묶는 기능입니다.
보통 그룹 선택자는 중복된 속성을 여러 번 반복해서 줄 경우, 선택자를 묶어서 한 번에 처리함으로써 코드를 줄여주는 역할을 합니다.
//이렇게 동일한 속성을 사용할때
h2 {
color : blue;
}
p {
color : blue;
}
div {
color : blue;
}
/* 그룹 선택자를 이용해서 한번에 처리 */
.h2, .p, .div {
color : blue
}
코드를 비교해서 보면 아래가 훨씬 깔끔하고 가독성이 좋다.
가상 클래스 선택자
선택자 뒤에 :가상 이벤트를 붙이면 특정 이벤트마다 적용할 스타일을 설정할 수 있으며, 이를 가상 클래스라 합니다.
가상 클래스 선택자의 종류는 많지만, 오늘은 그중 사용 빈도가 높은 아래 4개를 먼저 배우고 나머지는 이후에 차차 더 알아보도록 하겠습니다.
- :first-child : 첫 번째 자식
- :last-child : 마지막 자식
- :nth-child(n) : 홀수번째 자식
- :hover : 마우스를 요소에 올렸을 때
가상 클래스 선택자 사용방법
가상 클래스는 선택자 뒤에 콜론을 찍은 후 적어주시면 됩니다.
선택자:가상 클래스{ 속성 : 속성 값 } 이런 식으로 적어주시면 되며, 아래 예시를 통해 조금 더 자세히 알아보도록 하겠습니다.
.some-box:hover{ background-color: red; }
.container-boxs:first-child{ margin-left: 0; }
.container-boxs:last-child{ margin-right: 0; }
.contentsBox:nth-child(n){ color: red; }
nth-child(3)이라고 적어줘서 세 번째가 선택됨
nth-child(2n) 괄호 안에 연산자도 같이 넣어서 사용 가능 2n은 2의 배수에 해당하는 태그를 선택할 때 사용됨 2n-1 사용하면 짝수번째 해당하는
flex 레이아웃
flex는 레이아웃 배치 전용 기능으로 고안되었기 때문에 float에 비해 훨씬 편리합니다. 그렇기 때문에 flex가 등장한 이후부터 레이아웃에 있어서 float는 찬밥신세가 되었다고 볼 수 있습니다.
자, 이제 flex를 사용해볼까요?
Flex 레이아웃을 만들기 위한 기본적인 HTML 구조는 다음과 같습니다.
<div class="container">
<div class="item">박스1</div>
<div class="item">박스2</div>
<div class="item">박스3</div>
</div>
위의 코드에서 부모 요소는 container, 자식 요소는 item입니다.
우리는 이제부터 부모 요소를 Flex Container , 자식 요소를 Flex item이라고 부르겠습니다.
컨테이너는 Flex의 영향을 받는 전체 공간이고, 이 공간 내에 아이템들이 배치된다고 보시면 됩니다.
flex의 속성
flex가 적용된 요소(Flexbile box)에는 중심축(main-axis)과 교차축(cross-axis)이 생깁니다.
이 중심축과 교차축은 Flexible box의 정렬 기준이 됩니다.
flex의 속성
flex에 적용할 수 있는 속성은 크게 두 개로 나뉩니다.
- 컨테이너에 적용하는 속성
- 아이템에 적용하는 속성
컨테이너에 적용하는 속성들
- display : flex
- flex-direction (배치 방향 설정)
row (행) : 중심축을 가로 방향으로 배치합니다. 기본값
column (열) : 중심축을 세로 방향으로 배치합니다.
justify-content (메인 축 방향 정렬)
메인축 방향으로 어떻게 정렬할지 결정합니다.
flex-start
flex-end
center
space-between
space-around
space-evenly
align-items (교차축 방향 정렬)
교차축 방향, 즉 메인 축의 수직 방향으로 어떻게 정렬할지 결정합니다.
stretch
flex-start
flex-end
center
