웹 퍼블리싱
HTML은 사이트의 내용을,
CSS는 사이트를 꾸며준다.
HTML
<html></html>이것을 HMTL에서 '태그'라고 한다.
페이지 이름 넣기
<title></title>이라는 태그를 사용하면 된다.
<title>WebSite Study</title>페이지에 대한 정보는 모두 <head>태그 안에 적어준다.
<title>같은 경우에는 페이지의 내용에서의 제목이 아닌 페이지를 설명하는 제목이기 때문에
<head>태그 안에 넣어준다.
<head>
<title>WebSite Study</title>
</head>페이지의 내용에는 <body>라는 태그를 사용한다.
<body>
Hello HTML!
</body>인코딩
한글 깨짐 현상이 다른 브라우저에서는 나타날 수 있다. 그래서 직접 인코딩을 정해주면 되는데,
<head>태그에 <meta charset="utf-8">
을 해주면 된다.
utf-8은 한글을 지원하는 대표적인 인코딩 방식이다.
태그
<h1></h1> : 제목을 만들어준다. h2, h3 ... h6까지 있고 숫자가 커질수록 작은 제목을 만든다.
<p></p> : 단락을 나눠준다. html은 코딩할때 문단을 띄어도 붙어서 나오기 때문에, p태그로 문단을 나눠주어야 한다.
<br> : 줄바꿈을 할때 사용한다. 각 문장끝에 <br>만 써주면된다.
<a></a> : 하이퍼링크 <a href = "example.html" style="color: #3212e0">자세히 보기</a>
<img> : <img src="이미지의 주소 및 경로">
<div></div> : 영역을 나눌 수 있다. div태그는 영역을 나누는것 말고는 아무런 모양이나 의미가 없다. 쉽게 말해, 눈에 보이지 않는 박스라고 생각하면 된다.
<span></span> : span은 제목이나 단락같은곳에서 일부분만 영역을 지정할 때 사용한다.
기존에, <h1>HTML study</h1>와 같은 코드가 있었다면,
<h1>HTML <span>study</span></h1>와 같이 CSS스타일링을 가능하게 하는것이다.
CSS
색상을 고를때 유용한 검색어 : Color Picker
배경색 style="background-color:~"
div태그와 span태그는 영역을 나눈다고 했다.
여기에 이제 css로 색깔을 추가하려면
<div style="background-color:#7542e0">
위와 같이하면 된다.
style이라는건 html태그에 css속성을 추가할때 사용하는 옵션이다.
또, background-color라는것은 css속성이라고 부르는 문법이다.
꼭 div태그나 span태그가 아니어도 다른 태그에도 넣을 수있다.
글자색 style="color:~"
글자색은 color라는 css속성을 사용한다.
h1, p등과 같은 태그에다가 style을 추가하고,
<h1 style:color:#fffff>과 같이 해주면 된다.
페이지 전체의 글자색을 적용시키고 싶다면 페이지 전체를 감싼 <body>태그에 color 속성을 추가해주면 된다.
<div style="background-color: #7524e0"> # 이와같이 속성이 이미 부여되어있을땐
<div style="background-color: #7524e0; color:"#ffffff""> # 이와 같이 ;을 추가하고 새로운 속성을 부여하면 된다.글꼴 style="font-family: ~"
태그 안에다가 <h1 style="font-family: sans-serif">제목</h1>
해주면되는데, 혹시 영어만 지원하는 글꼴이라서, 다음으로 지정할 글꼴을 설정하고 싶다면,
<h1 style="font-family: sans-serif, Arial">이런식으로 ,로 구분하여 설정할 수 있다.
즉, font-family라는 css속성에서는 글꼴을 여러개 지정해놓을 수 있는것이다.
이렇게 컴퓨터에 기본저장된 글꼴이 아닌, 꼭 내가 원하는 글꼴로 보여주는 방법도 존재한다.
글꼴 파일을 직접 인터넷으로 제공해주는건데, 웹 폰트라고 부른다.
구글에 구글 폰트를 검색하고 원하는 글꼴을 선택 후 Get Font를 눌러, Copy code를 클릭해 복사한뒤, HTML코드의 head태그 안에다가 넣어준다.
<예시>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap" rel="stylesheet">- link태그는 현재 페이지를 외부와 연결할때 사용한다.
그리고 구글 폰트사이트 화면 아래쪽에 코드를 보면 폰트 이름이 나와있는데, 이 이름을 사용해서 font-family를 지정하는 부분에 폰트 이름을 넣어주면 된다.
이것도 폰트 2개를 선택하면 기존의 link코드 말고, 2개가 선택된 link코드를 주므로, 2개이상 사용할 수 있게된다.
픽셀 px
css에서는 크기를 설정할때 픽셀이라는 단위를 쓴다.
코드에서 크기의 단위로 쓸때는 px라고 쓰고 픽셀이라고 읽으면 된다.
글자의 크기도 픽셀로 설정하는 경우가 많은데, 글자 크기가 24px라고 하면 글자의 세로 길이가 24px라는 뜻이다.
글자 크기와 굵기 font-size; font-weight
태그에 font-size라는 css속성을 추가해주면 된다.
<h2 style="color: #ffffff; font-size: 20px">
글자 크기가 20px로 된다.
굵기는 100단위로 쓰는데, 100에서 부터 900까지 숫자가 클수록 굵게 된다.
<div style="color:#ffffff; font-weight: 300"> 굵기가 300
글 정렬하기 text-align: (left, center, right)
기본적으로 웹 페이지는 좌측으로 정렬한다.
정렬을 할땐 text-align이라는 css속성을 사용하면 된다. (left, center, right)
<div style="color: #ffffff; text-align: center">
을 하게되면 div박스 안에 있는 요소들이 중앙으로 정렬한다.
크기 width, height, %
이미지 같은 경우엔
<img src="이미지 경로" style="width: 700px, height: 375px">
이렇게 하면 너비는 700px 높이는 375px가 된다.
하지만, 이렇게 px로 하면 크기가 고정되기 때문에 웹 브라우저마다 크기가 다른데 아쉬울 수 있다.
<img src="이미지 경로" style="width:100%">
이렇게 %를 사용해서 써주면, 높이는 알아서 해주고 비율을 유지하며 바뀌게 된다.
그리고 본문의 너비도 조절하고 싶을때가 있을텐데,
<div style="background-color: #1233e2"> // 여기서 크기를 조정하면 배경색이 적용되는 범위도 같이 줄어들기 때문에
<div style="width:560px"> // div박스를 하나 더 써주고
<img src="이미지 경로 style="width: 100%">
...이렇게 하면 img태그는 560px안에서 100%. 즉, 560px만큼 꽉 차게 된다.
여백 padding margin
padding이라는 css속성을 사용하면 박스 안쪽에 여백을 줄 수 있다.
<div style="padding: 30px"> <= 30px만큼 박스 안쪽으로 여백
가로 여백도 줄이고 싶다면
<div style="padding: 30px 20px"> <= 안쪽으로 세로 30px여백, 가로 20px여백
박스의 바깥쪽에 여백을 주고 싶을땐 margin을 사용하면 된다.
<div style="padding: 30px; margin: 32px"> # 상자 안쪽 여백은 30px 상자 바깥여백은 32px
#html은 기본적으로 margin값이 기본으로 다 들어가 있는데, 이를 없애고 꽉 채우고 싶다면
<div style="padding: 30px; margin: 0"> # margin을 없애고 꽉채운다 0은 0px와 같음
<div style="padding: 30px; margin: 0 auto"> // 안쪽여백은 30px를 주고, 세로로는 바깥여백을 추가하지 않고 가로로는 알아서 공간을 채운다.