css는 스타일을 입혀주는 언어이다.
어떤 요소에 스타일을 입혀줄 것인지 지정하기 위해서 html의 태그 안에 class와 id태그를 이용해 선자를 붙여준다.
class는 여러 개를 동시에 가질 수 있지만 id는 하나만 가질 수 있다는 차이점이 있다.
<p class="title title1 title2" id="title">긴 문장을 작성</p>이렇게 띄어쓰기를 통해 여러개의 클래스 이름을 동시에 가질 수 있다.
html에서 봤던 style 속성은 css를 작성하게 해준다.
태그의 속성뿐만 아니라 html의 head태그 안에서도 style태그를 이용해 따로 css파일을 만들지 않고 css를 작성할 수 있다.
.을 앞에 붙이면 class의 스타일을 지정해줄 수 있고 #을 앞에 붙이면 해당 id의 스타일을 지정해줄 수 있다.
예시처럼 색깔 red와 blue가 겹칠 때는 더 아래에 있는 코드가 적용이 된다는 사실을 확인하였다.
css파일에 따로 css코드를 저장하려면 style 태그 안에 작성했던 내용을 main.css파일 안에 옮기고,
html파일의 head태그 안에서 link태그를 사용해 외부 파일을 불러오면 된다.
main.html과 main.css가 같은 폴더 안에 들어있기 때문에 ./main.css 로 외부 파일의 주소를 사용할 수 있다.
<p>긴 <span>문장을</span> 쓸 때 </p>p > span {
color:red;
}이런식으로 p태그 안의 span태그의 스타일을 지정하고 싶을 때 >를 이용해 css코드를 작성할 수도 있다.
하지만 이렇게 하면 다른 p태그 안에 span태그가 있을 때 거기에도 적용이 되기 때문에 전체적인 스타일을 지정할 때만 사용한다.
<p>긴 <span class="title">문장을</span> 쓸 때 </p>p > .title {
color:red;
}이렇게 p태그 안에 있는 것들 중에 클래스가 title인 부분의 스타일을 지정하는 방법도 있다.
자주 사용되는 css
<body>
<div class="layout">
<p class="content">웹 공부</p>
</div>
</body>.layout {
background-color: blue;
width:300px;
height:300px;
border: 10px solid #000;
border-radius: 100px;
text-align: center;
}
.content {
color: #fff;
font-size: 200%;
font-weight: 900;
margin-top: 100px;
}1. background-color : 말 그대로 배경색을 정해준다. div영역으로 지정된 영역의 배경색을 바꿔준다.
2. width, height : 해당 태그의 영역의 너비와 높이를 지정해준다.
3. border : 테두리를 의미하며 첫번째에 10px은 테두리의 두께, 두번째의 solid는 실선을 의미한다.
solid대신에 dotted를 사용하면 점선으로 표시된다. 마지막으로 #000은 테두리 색을 의미한다.
4. border-radius : 테두리가 구부러진 정도를 의미하며 border-radius를 설정하지 않거나 0으로 두면 구부러지지 않게 된다.
5. text-align : 내부에 표시되는 텍스트가 어디에 위치할지를 결정한다. center로 설정했기 때문에 가운데에 위치한다.
6. font-size : 말 그래도 글자 크기이다.
7. font-weight : 글자의 두께를 의미한다.
8. margin-top : 위에서부터 떨어진 거리를 의미한다. top말고 left, right, bottom 등을 이용해서 위치를 자유롭게 조정할 수 있다.
위의 예시 코드의 결과물이다.
구글 웹폰트
구글에서 지원하는 다양한 폰트를 이용할 수 있다.
https://fonts.google.com/?subset=korean¬o.script=Kore
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
한국어 폰트는 이 링크에서 찾아볼 수 있다.
원하는 폰트에 들어가보면
밑에 styles가 있고 오른쪽 하단에 Select Regular 400 +가 보인다.
이걸 눌러주고 오른쪽 상단에 쇼핑백 표시를 눌러보면
이런식으로 selected family를 볼 수 있고 이 폰트를 사용하기 위한 link태그도 볼 수 있다.
이 link태그를 복사해서 html파일의 head태그 안에 붙여넣어 주고,
selected family에서 조금 내리면 보이는 font-family: 'Nanum Pen Script', cursive; 를 이용해서 css코드를 작성할 수 있다.
(font-family: 는 폰트마다 다르다.)
.content {
color: #fff;
font-size: 200%;
font-weight: 900;
margin-top: 100px;
font-family: 'Nanum Pen Script', cursive;
}이렇게 코드를 수정하면,
폰트가 바뀌는 것을 확인할 수 있다.
'웹개발' 카테고리의 다른 글
| MySQL-Sequelize (0) | 2023.10.15 |
|---|---|
| Node.js (0) | 2023.10.11 |
| JavaScript (0) | 2023.10.11 |
| Html (0) | 2023.10.11 |
| 깃허브 기초 사용법 (0) | 2023.10.11 |
