부트캠프의 첫 수업일!
기대되기도하고, 따라가지 못하진 않을까 걱정되기도 했는데 생각보다 힘들지 않았다! 아무래도 첫날이라 그런것이겠지만,,😅
오늘 학습한 내용 중 몇가지를 필기해보았다.
꾸준히 TIL을 작성할 수 있을진 모르겠지만 일단 start!
html의 태그
<h1> h1은 제목을 나타내므로 하나만 사용!</h1>
<a>링크를 만들어준당</a>
<a target ="_blank">새 탭으로 연결</a>
<img scr="가져올 이미지" alt="대체택스트 웹표준에서는 필수!" />
<ul>
<li>순서가 없는 목록1</li>
<li>순서가 없는 목록2</li>
</ul>
<ol>
<li>순서가 있는 목록1</li>
<li>순서가 있는 목록2</li>
</ol>
<p>
<strong>두껍게 강조</strong>
<em>기울임으로 강조</em>
</p>block
- 한 줄을 다 차지
- y축 정렬이 가능
<h1>~<h6>,<p>,<ul>,<ol>,<li>,<div>
inline
- 포함된 내용만큼만 차지
- x축 정렬이 가능
<img>,<a>,<strong>,<em>,<span>
시맨틱 태그
<header>는 웹사이트의 머리글을 의미
<nav>는 navigation의 약자이며, 주로 메뉴버튼을 의미
<main>은 body내의 주요 컨텐츠를 의미
<article>은 사이트 내 독립적인 구분을 의미(ex.블로그 글, 뉴스 기사)
- <h1>이 article 내의 필수요소 이다.
<footer>는 웹사이트의 맨 하단을 의미하며 주로 저작권, 작성자 등의 정보를 적음
CSS 맛보기
css 적용 방식
inline-style
<div style = "background-color: blue;">인라인 스타일 적용</div>우선순위가 가장 높은 적용
코드 재활용이 좋지 못함
가급적 쓰지 않는 것이 좋음(테스트 용도)
internal style
<head>
<style>
div {
background-color: blue;
}
</style>
</head>인라인 스타일 다음으로 우선순위 적용
특정 페이지에서만 적용하기 위해 사용
주로 <head> 태그 안에 정의
external style
<head>
<link rel="stylesheet" href="main.css"/>
</head>가장 많이 사용하는 방식
협업에 우수함
여러 HTML에 동일한 스타일을 적용할 수 있음
css 선택자의 종류
타입 선택자
div{
width:200px;
height:150px;
background-color:red;
}특정 태그에 스타일을 적용하는 방법
ID 선택자
선택자 앞에 샵(#)을 붙여주면 ID를 의미
특정 요소만 적용할 때 사용 (중복 사용 불가)
CLASS 선택자
선택자 앞에 점(.)을 붙여주면 CLASS를 의미
범용적으로 적용할 때 사용(중복 사용 가능)
css 속성 사용시 주의점
-
몇몇 속성은 부모에게서 상속받기도 함
-
단위를
%로 적용하면 부모의 %로 적용 ( 페이지가 아님! ) -
background-image를 사용할 때에는height속성이 필요!
또한background-image는 여러개 적용도 가능하다. -
margin: 10px 10px; /* 상하:10px 좌우:10px */ margin:10px 20px 10px; /* 상:10px 좌우:20px 하:10px */ 시계방향으로 돌아감! -
브라우저 화면의 절반으로 너비를 지정하고 싶다면 vw 단위를 사용하면 된다! 높이의 경우 vh라는 단위를 사용하면 된다.
CSS 적용 우선순위(cascading)
- 순서(코드를 정의한 순서)
- 중요도(CSS가 어디에 선언 되었는가?)
- 나중에 선언된 값이 최종적으로 적용됨
- 인라인 스타일 > 내부 스타일 > 외부 스타일 > 브라우저 기본 스타일
- 명시도(디테일하게 선언될수록 우선순위가 높아짐)
!important는 우선순위를 가장 높여주는 키워드!!- style > id > class > type
자식선택자와 하위선택자
<div class="parent"> <p>A</p> <p>B</p> <div> <p>C</p> </div> </div>
위 구조에서,/*자식 선택자*/
.parent > p{
color:red;
}A, B의 색깔만 바뀌게 되고,
/*하위 선택자*/
.parent p{
color:red;
}.parent안에있는 모든 p태그(A, B, C)의 글자의 색이 바뀌게 된다.
