티스토리 뷰
HTML( Hyper Text Markup Language )
-> 자료들이 어떻게 생겼나 구조를 표현하기 위한 언어
1. HTML Default Format
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
2. 글을 적기 위해선 (태그 공부)
<body> 안에 <p></p>안에 적어야한다. (Paragraph의 p)
-. <h1> : 글 제목 태그. 1~6까지 사이즈 조절 가능
🌟태그만 보고 그 안에 적힌 글의 목적이 무엇인지 알아야 한다.
-. <img src="이미지 경로"> : 이미지를 올리고싶을때
-> 이미지를 html과 같은 파일에 있을경우 그냥 파일 이름만 입력하면 된다
❓궁금증: 그럼 다른 경로에 있을땐?
-. <button> : button 만들어주는 태그
-. <a href="링크 주소"> : 하이퍼 링크 만들어주는 태그
-. <ul>
<li>항목1</li>
</ul> : 항목(리스트) 만들어 주는 태그 (기본적으로 동그란 점이 생김.
🌟ul : unordered list(번외 자동으로 1번이 넣어지게 하려면 ol 로 입력하면됨), li : list item
🌟/는 끝맺음 기호, 뾰족 괄호<> 안에 들어가있는 모든 것들은 '태그' 라고 부른다.
🌟태그 안에는 속성을 집어 넣을 수 있다. <a href>, <img src> 등이 속성이다. (선택사항)
🌟태그 안에 태그 넣을수 있음. ex. 이미지 누르면 구글로 이동하도록 하려면? (정답은 아래 드래그 하면 나옴)
ans: <a href="https://google.com"><img src="증명사진.jpg"></a>
-> 링크태그 안에 이미지 태그를 넣은거임. 링크를 누르면 구글로 이동함.
연습 (1). 글자 일부를 누르면 구글로 이동하도록?(정답은 아래 드래그 하면 됨)
ans: <p>안녕하세요 <a href="https://google.com">구글</a> 을 누르시면 해당 사이트로 이동합니다.
</p>
3. HTML 꾸미는 법 - style 속성으로 꾸미기(<태그 style ="속성 : 값">)
- 위치 조절
- width: 가로폭,height : 세로 폭, margin-left(top, bottom,right 등): 각 방향에 마진 넣기
- 🌟이미지 가운데 정렬하는 방법 : display : block ; margin-left : auto; margin-right: auto"
- 글자 정렬 text-align : center(left, right 등)
- 네모난 사진을 동그랗게 : (직사각형일 경우 width와 height를 통해 정사각형으로 만든 후) border-radius: % 또는 px 등을 사용하면됨.
- 폰트 조절
- [폰트 사이즈] font-size : 16px (vw: 현재 브라우저 창의 넓이, % 부모 태그의 몇 %로 설정해주세요 등)
🌟부모태그란? : 감싸안은 태그 <p><a></a></p> 일 경우 <p></p>가 부모 태그
-
- [폰트 종류] font-family : '폰트명' : 한글 폰트의 경우 한글 폰트에 명명된 영어 명칭을 적어주면 됨 (e.g 굴림 = gulim)
- [폰트 색] color : 색상(red) 혹은 색상 코드(#eeeee)
🌟일부분만 빨간색? -> span 태그 사용. 글자를 감쌀 수 있는 별 뜻 없는 태그 임
e.g <p><span style="color:blue">Front-end</span>Developer</p>
-
-
- [글자 굵게] font-weight : 100~900 or stlye 없이 <strong>태그
- [자간 간격] letter-spacing : 10px
-
연습(2) : 나만의 초간단 프로필 만들어보기( basicprofile.html 에 완료 및 아래 긁기 )
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="증명사진.jpg" style="width: 100px; height: 100px; display:block; margin-left:auto; margin-right: auto; border-radius: 50px">
<h2 style="text-align : center">Young</h6>
<p style="text-align : center; font-size: 16px;"><span style="color:blue">Front-end</span> Developer</p>
<p style="text-align : center"><strong style="font-family:Georgia, 'Times New Roman', Times, serif; letter-spacing: 10px;">It ain't over till it's over.</strong></p>
</body>
</html>
4. CSS
Cascading Style Sheet
: Cascading - 폭포처럼 떨어진다 라는 뜻.
<img src="증명사진.jpg" style="width: 100px; height: 100px; display:block; margin-left:auto; margin-right: auto; border-radius: 50px">
처럼 너무 길어질 경우 보기에도 수정하기에도 불편하므로, CSS 를 사용하여 하나의 객체처럼 보관 및 불러오기 가능하다.
우선, <link> 태그로 css파일 연결
-> html파일에 <link href="css파일의 경로" rel="stylesheet">
-> <link href="css/main.css" rel="stylesheet"> : css/main.css 처럼 폴더명/파일명 으로 경로를 찾아갈 수 있다.
CSS 파일에 .profile을 통해 축약 가능. 이후 class="profile"로 불러오면 됨.
이것을 class selector 라고 부름
.profile{
width: 100px;
height: 100px;
display:block;
margin-left:auto;
margin-right: auto;
border-radius: 50px
}
-> 이게 하나의 Class.
<img src = "lion.png" class="profile"> 식으로 불러오면 됨.
Tag selector
추가로, 동일 태그에는 동일 형식이 쓰일 수 있도록 설정 가능.
-> .title 이런식이 아닌 그냥 p{} 이렇게그 태그의 이름만 쓰면 됨
이것을 tag selector라고 부름
p{
text-align : center
}
/*모든 p 태그에 대해 일괄 적용 따로 호출하지 않아도 <p>태그 들어간 곳에 다 적용됨.
*/
*class 대신 # + id 로 쓸수도 있음 : 그러나 요즘 안쓰임
#special{
text-align: center
}
스타일 설정이 곂칠경우
* class selector , tag selector, id selector 모두 하나에 적용되는데 색 스타일이 다를 경우.
-> 1. id 2. class 3. tag 순으로 우선순위따라 정해짐
eg. id에서는 초록색, tag에서는 빨간색, class에서는 파란색으로 색 설정을 했고, 동시에 선언되었을 경우
id설정값으로 적용됨.
참고로 style로 직접 설정할경우 이게 제일 최우선 순위임.
'TIL' 카테고리의 다른 글
| 21.Dec.26 HTML&CSS 와 Selenium 공부 참고 사이트 (0) | 2021.12.26 |
|---|---|
| 21.Dec.26 terminal 오류 발생 시 exit() (0) | 2021.12.26 |
| 21.NOV.07 Python // python - module & import (0) | 2021.11.07 |
| 21.Oct-05 CSS // inline-block - 다른 요소들과 어울리는 방법 (0) | 2021.10.05 |
| 21.Oct.04 CSS // 레이아웃 및 박스, 한 줄에 여러 div 올리기-float (0) | 2021.10.04 |