TIL39. html & css

Jaeyeon·2021년 3월 15일
CSSWeCodehtml
0
post-thumbnail

< 준식님이 강조한 내용 >
학습목표가 면접 질문이라고 생각해야한다.
블로깅할 때 제목만 보고 어떤 내용을 다뤘는지 알아야 한다.
너무 많은 내용을 다루지 말고 효율적으로 ( 개념 위주 말고 쭉 보다가 deep한 내용만)

일기장이 아닌 기술 블로그 (사적인내용은 줄이고 기술만 쓰기)
배웠던 지식과 사용한 경험을 녹여내기 (내 코드 리뷰하기)
사전적인 정의 뿐 아니라 나의 생각도 정리하기
모든 개념들을 면접질문에서 물어본다면..?

<학습목표>

  1. 웹 페이지의 토대가 되는 HTML과 CSS의 역할에 대해 설명할 수 있다.
  2. HTML과 CSS의 기초 개념 및 용어를 설명할 수 있다.
  3. HTML에서 자주 사용되는 태그의 종류를 알고 적절하게 활용할 수 있다.
  4. Semantic Web이 무엇인지, Semantic tag를 사용하는 것이 왜 중요한지 설명할 수 있다.
  5. CSS 기본 개념을 활용하여 페이지의 레이아웃을 구성하며 요소에 스타일을 입힐 수 있다.

✅ html

html이란 무엇인가?

  • 웹 페이지를 만들기 위한 언어
  • 웹 페이지의 구조를 잡을 수 있다.

html 태그

  • <h1>, <h2>, <h3>, <h4>, <h5> : heading의 줄임말로써 제목같은 텍스트를 보여줄 때 사용하는 태그이며 1에서 5로 올라갈 수록 글씨는 점점 작아진다.
  • <span> : 주로 텍스트를 넣어주며 줄이 바뀌지 않고 한줄로 이어 나오게 된다. (inline-element)
<span>이름: 김개발</span>
<span>직업: 프론트앤드 개발자</span>

  • <p> : 텍스트를 주로 넣어 주며 paragraph의 줄임말이기 때문에 문단을 통으로 넣음. 줄바꿈이 발생
<p>tag들 파헤치기!!</p>
<p>아자!!</p>

  • <a> : 클릭하면 화면 이동, href와 항상 같이 다니며 그 뒤에 주소를 입력, target속성에 "_blank"를 클릭하면 새창, target을 입력하지 않으면 그창에서 그대로 이동
<a href="https://www.w3schools.com/tags/tag_div.asp" target="_blank">a 태그?</a>

  • <div> : 섹션을 나눌 때 사용, 비슷한 부분끼리 그룹 짓기, 레이아웃 분리, css스타일을 입혀기 위해 div를 사용한다.

html의 속성

  • 속성은 시작 태그에 위치하며 한 태그에 여러 속성을 지정할 수 있다.
  • 아래에서 div,a,img는 태그이고 class,href,src,alt는 속성이다
<div class="title">시작!</div>
<a href="https://naver.com">네이버로 이동</a>
<img src="./me.png" alt="내사진">

html의 요소

  • <태그이름>으로 시작하여 </태그이름>으로 끝나고 태그 사이에 내용이 있는 구조를 요소라고 한다.
  • 끝 태그가 필요없는 것은 태그가 그 자체로 요소가 된다.
<h1>시작!</h1>
<img src="me.png">

html파일의 구조

<!DOCTYPE>		# 제일 첫 줄에 위치해야 하는 선언문이지만 html 태그는 아니다.
<html>			# 브라우저가 html태그를 만나면, html이 시작됐는지 인지하고 요소를 그릴 준비를 한다.		
 <head>			# html태그 다음에 항상 위치, 사이트의 제목,설명,부가정보,기술적 내용이 들어가는 부분이다.
 </head>
 <body>			# 항상 head 태그 다음에 위치, body태그 내부에는 화면에 보여질 각종 태그들이 위치한다.
 </body>
</html>

html 속성에 대해 더 깊게 알아보자

  • id : 각 태그에 이름을 주는 속성, 고유한 값이어야 하므로 웹 페이지에 id 이름은 오직 하나만!
    해당 요소에만 넣고 싶은 디자인을 적용할 때 사용한다.
<div id="profile">
  • class : id와 같이 이름을 주는 속성, id와 차이점은 class는 여러 태그에 중복된 이름 부여 가능
<div class="content-wrap"></div>
<p class="content-wrap"></p>

✅ css

css 란 무엇인가?

  • html 태그들에 디자인을 입혀주는 것
  • html이 정보를 조직화 하는 구조를 제공한다면, css는 스타일을 입히는 것

css 파일 작성하기

  • 태그에 직접 css를 입힐 수 있고 html파일 안에서 css를 작성 할 수 있지만 유지보수가 어렵다.
  • 따라서 css 파일을 따로 만들고 html 파일에서 링크 유도를 해줘야 한다.
<link href="style.css" rel="stylesheet" type="text/css" />
  1. link — link태그로 사용할 css파일을 링크해줍니다.
  2. href — href 속성에 css 파일 경로 를 작성합니다.
  3. type — link태그로 연결되는 파일이 어떤 것인지 알려줍니다. 여기서 css file을 연결하므로 type값은 항상 "text/css"입니다.
  4. rel — rel은 HTML file과 CSS file과의 관계를 설명하는 속성입니다. css파일을 링크할 때는 항상 "stylesheet"값을 대입해줍니다.

css 작성법

  • selector가 단순 태그 였다면 그냥 적어주면 되지만 클래스라면 앞에 .클래스이름을 작성하면 됨
  • id에 css를 작성하고 싶다면 앞에 #아이디이름을 작성해주면 된다.

css 폰트 스타일

  1. font-family : 폰트 스타일을 지정하는 속성을 말한다.
#title {
  font-family: Georgia, "Times New Roman", Times, serif;
}

  1. 브라우저가 Georgia 라는 폰트를 지원해주면 Georgia 폰트로 적용

  2. Georgia 폰트가 지원되지 않으면, "Times New Roman"을 적용
    (폰트 이름에 띄어쓰기가 있으면 쌍따옴표로 감싸줘야 함)

  3. 이것도 지원되지 않으면 Times을 적용

  4. 앞의 세 가지 폰트가 전부 없으면 serif라는 폰트를 사용하겠다는 뜻이다.

  5. font-size : 폰트의 크기를 지정해준다.

h1 {
  font-size: 30px;
}

.big-size-font {
  font-size: 50px;
}

  • 원래 h1글씨가 더 커야 하지만 big-size-font클래스 안에 폰트사이즈가 더 크므로 h1보다 더 크다.
  • 해당 태그나 class,id에 css값이 있다면 해당 스타일을 더 우선순위로 적용
  1. font-weight : 글씨 두께 조절
  • font-weight: bold; font-weight: 200; 등등으로 지정 할 수 있음

  1. font-style : 글씨 스타일을 바꿀 수 있다.

  2. color : 폰트 색상을 변경 해줄 수 있다.

  • hex 색상코드: 여섯자리로 표현 - #eb4639
  • rgb 값: 빨강, 초록, 파랑으로 표현 - rgb(235, 70, 57),
  • hsl: 색상, 채도, 명도(hue, saturation, lightness)로 표현 - hsl(4, 82%, 57%)

css 텍스트 스타일

  1. text-align : 텍스트 정렬
  • text-align: left; 왼쪽 정렬 (디폴트 값)
  • text-align: center; 가운데 정렬
  • text-align: right; 오른쪽 정렬
    <span>은 inline-element 이기 때문에 text-align이 적용하지 않는다.
  1. text-indent : 텍스트 들여쓰기
  • text-indent: 50px; 50px 들여쓰기를 의미한다.
  • &nbsp; : 스페이스를 의미한다.
<p>스페이스 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;넣는 예제</p>

margin & padding

  • margin: border 외부에 생기는 여백
  • padding: boarder 내부에 생기는 여백

border

  • border: 4px double red;

  • border: 2px solid #666666;

  • 위처럼 보더의 사이즈, 선종류, 선색상 순으로 작성한다.

  • 밑줄을 그을 땐 border-bottom을 주로 사용 한다.

box-sizing

  • box-sizing: border-box; 안의 컨텐츠 기준으로 크기를 측정하는 것이 아닌 밖의 보더 사이즈 기준으로 측정

상속

  • 스타일이 상속되어 자식에게도 같은 스타일이 적용된다.
  • 하지만 자식이 부모와 같은 속성을 다르게 정의 했다면 자식이 정의한대로 출력된다.

그룹

.what-is-blockquote, span {
  color: green;
}

위와 같이 똑같은 스타일을 적용하고 싶을때는 한꺼번에 스타일을 지정할 수 있다.

css selector에 대해 더 자세하게 알아보자

-태그 안에 클래스 or 태그 안에 id

p.p-tag {
  color: gray;
}
p#third-line {
  text-decoration: underline;
}
  • 클래스 안에 태그
.pre span {
  background-color: yellow;
}

띄어쓰기에 주의 해야 한다!

css selector 우선순위

  • tag <<<<< class <<<< id <<<<<< inline css(html안에 직접 스타일링)

img

<img alt="HTML" src="https://www.w3schools.com/whatis/img_js.png">
  • alt: 이미지가 뜨지 않을 때 이미지 대신 보여줄 텍스트
  • src: 이미지 파일경로 or 이미지 url 주소

이미지 넣기

  1. <img> 태그 사용하기
  2. background-image로 이미지 넣기
profile
Jaeyeon
생각하는 개발자 되기
이전 포스트

TIL38. Git(2)

다음 포스트

TIL40. semantic web & semantic tag

0개의 댓글