부트캠프 두번째 날이다!
오늘도 HTML과 CSS의 기본적인 부분을 학습하였는데, 어제 학습한 부분을 복습한 후에 새로운 부분을 학습하는 스케줄이었다.
그래서 오늘의 TIL은 어제와 다소 겹치는 부분이 있었는데, 그래도 다른 강사님의 수업을 들어서인지 새롭게 알게되는 부분도 있었고 더 다양한 이해가 가능했다.
프로그래밍이란?
컴퓨터와 소통하는 방법을 의미
컴퓨터에게 전달하는 정보를 어떻게 보여주고 제어할지 결정 가능
웹 개발을 하기 위한 언어로 브라우저와 소통
HTML - 정보 또는 설계도
CSS - 디자인 또는 스타일링
JavaScript - 기능과 효과
웹사이트 제작시 고려 사항
- 웹 표준
- 웹사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격
- 웹 접근성
- 장애의 여부와 상관 없이 모두가 웹사이트를 이용할 수 있게 하는 방식
- 크로스 브라우징
- 모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는 기법
HTML 문서의 기본 구조
<!DOCTYPE html>
HTML5라는 신조어로 문서를 선언하는 태그
<html>
HTML문서의 시작과 끝을 의미
모든 HTML태그들은 <html>태그 안쪽에 입력되어야함.
<head>
웹사이트의 간단한 요약 정보를 담는 영역
웹사이트에서 노출되지 않는 정보
<meta charset = "UTF-8">
character setting의 약자를 나타내는 문자코드로,
모든 문자를 웹 부라우저에서 깨짐없이 표시하겠다는 의미
☑️ 이 부분을 넣지 않으면 간혹 한글이 깨지는 현상이 발생!
<title>
웹사이트 탭에 나타나는 제목을 적는 태그
</title>
</head>
<body>
웹사이트에서 눈에 보이는 정보를 담는 영역
이미지나 텍스트처럼 출력되는 정보
<h1>h1태그는 한 html문서 내부에 하나만!</h1>
</body>
</html>구조를 잡을 때 사용하는 태그
<header>
웹사이트의 머리글을 담는 공간
<nav>
메뉴 버튼을 담는 공간으로 `<ul>`, `<li>`, `<a>`와 함께 사용한다.
</nav>
</header>
<main role="main"> <!-- explore에선 지원X-->
문서의 주요 내용을 담는 태그
IE(Internet Explorer)는 지원하지 않으므로 role = "main" 속성을 필수로 입력해야함.
<article>
문서의 주요 이미지나 텍스트 등의 정보를 담고 구역을 설정하는 태그.
태그 내에 구역을 대표하는 타이틀 <h#>태그가 존재해야함.
</article>
</main>
<footer>
가장 하단에 들어가는 정보를 표기할 때 사용
<div>임의의 공간을 만들 때 사용</div>
</footer>
HTML 태그의 두 가지 성격
Block 요소
y 축 정렬 형태로 출력(줄바꿈 현상 나타남)
구체적인 공간에 대한 너비와 높이 설정 가능
상하 배치 작업 가능(margin과 padding값 적용 가능)
<h1>-<h6>, <div>, <header>,<p>
inline 요소
x 축 정렬 형태로 출력(한 줄에 출력)
공간을 만들 수 없고, 상하 배치 작업이 불가능(margin-top/bottom, padding-top/bottom 적용 불가)
<a>, <span>
부모 자식 관계
<header>
<h1>Hi</h1>
<p>Hello</p>
</header><header>과 <h1>,<p>:부모 자식 관계
<h1>과<p>:형제 관계
CSS(Cascading Style Sheet)
정보(HTML)와 디자인(CSS)의 분리
문서의 레이아웃과 스타일 정의
HTML로 작성된 정보를 꾸며주는 언어
선택자 { 속성 : 속성값;}
선택자: 디자인을 적용할 HTML영역
속성: 어떤 디자인을 적용할지 정의
속성값: 어떤 역할을 수행할지 구체적으로 명령. 세미콜론(;)을 반드시 입력해야함.
css 연동 방법
inline style sheet
<h1 style = "color: red;">hello</h1>태그 안에 직접 원하는 스타일을 적용
internal style sheet
<head>
<style>
h1{background-color:yellow;}
</style>
</head><style>태그 안에 넣기
external style sheet
<head>
<link rel="stylesheet" href="style.css">
</head><link>태그로 불러오기
✅ href 경로 입력
✅ rel 연결된 문서가 담고있는 성격을 지정
CSS 선택자
타입 선택자
HTML 태그의 이름에 스타일을 적용
h1{color:red;}클래스 선택자
클래스는 별명에 비유 가능
클래스 이름으로 특정 위치에 스타일을 적용
.hello{background-color:yellow;}아이디 선택자
ID는 이름에 비유 가능(한번만 사용)
ID를 이용하여 스타일을 적용
#hi{color:purple;}부모 자식 관계
부모의 css속성이 상속 되기도함.
그럴땐, 구체적으로 선택자를 명시해 개별 속성을 부여
부모태그 자식태그{color:red;}
모든 css속성이 상속되는 것은 아님!
CSS 주요 속성
width: 선택한 요소의 넓이를 설정 ( 고정값 :px, 가변값:% )
height: 선택한 요소의 높이를 설정
font-family: 브라우저마다 지원하는 폰트가 다름. 입력한 순서대로 우선 순위 적용을 하고, sans-serif는 마지막에 작성하는 디폴트 값이다.
font-weight: 100~900 사이의 숫자를 입력해 글자의 두께를 설정
background-image: url(이미지 경로)
background-repeat
- x축으로 반복:
repeat-x - y축으로 반복:
repeat-y - 반복하지 않음:
no-repeat
background-position: 공간 안에서 이미지의 좌표를 변경할 때 사용. top, bottom, center, left, right 등.
background: yellow url(이미지 경로) no-repeat left;
(순서는 상관 없음!!)
margin: border 바깥쪽 여백
padding: border 안쪽 여백, 공간이 여백을 포함한 크기로 변경된다.
top right bottom left 순서로 한 줄에 작성 가능
마진 병합 현상
형제 지간의 마진 병합
<div class="box1">Hello World</div>
<div class="box2">Hello World</div>.box1{margin-bottom:150px;}
.box2{margin-top:100px;}이렇게 될 경우, 더 큰 값의 마진이 적용된다.
.box1밑의 margin이 250px이 아닌 150px으로 나타나고, .box2 위의 margin도 같은 영역dmfh 150px이 된다.
부모 자식간의 마진 병합
<main>
<article>
</article>
</main>article{margin-top:200px;}이렇게 <article>에게만 마진을 주었다고 해도 부모에까지 영향을 미쳐 <main> 위에 margin 200px이 생기는 현상이다.
레이아웃에 영향을 미치는 속성
display
Block과 inline요소의 성격을 바꿀 때 사용
inline-block을 사용하면 두 요소의 성격을 모두 가지게 된다.
float
선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시키고자 할 때 사용
이름 그대로 선택자를 띄워 새로운 레이어층을 만드는 것.
브라우저 기준, 왼쪽에서부터 정렬시키고 싶을때 float:left;
오른쪽에서부터 정렬시키고 싶을때 float:right;
레이어가 겹쳐지지 않는 상태로 정렬시키고 싶다면 각 요소에 연속적으로 입력.
clear
float에 대한 속성을 제어하고자 할 때 사용
float을 마지막으로 사용한 지점 다음 태그에 적용.
clear:both;값은 오른쪽 왼쪽 모두 기능을 꺼주겠다는 의미로 left, right보다는 both를 주로 사용.
브라우저와 공간 사이의 공백 제거하기
*{
margin:0;
padding:0;
}<html>과 <body> 태그는 margin과 padding 값을 가지고 있으므로 초기화를 해주어야 함.
마지막에는 배운 html과 css를 사용해 직접 간단한 쇼핑몰을 만들어보며 마무리했다!👊
