HTML,CSS

소재현·2022년 6월 24일
0

스타일을 적용하는 방법

일반적으로는 외부 CSS 파일에 스타일을 쓰고 HTML 코드에서 태그로 연결해주는 것이 가장 좋은 방식이다. 하지만 조금씩 새로운 스타일을 시도해볼 때에는 간편함을 위해서 < style>태그를 쓰는 방법 또는 style 속성에서 테스트를 하고, 나중에 외부 CSS 파일로 옮기는 방법도 있다!

<style>
h1 {
color: green;
 text-align: center;
}
p {
font-size: 18px;
}
</style>

< style> 태그는 해당 HTML 문서의 스타일 정보를 정의할 때 사용한다.

<link href="css/styles.css" rel="stylesheet">

별도의 파일로 저장된 외부 스타일 시트는 < link> 요소를 사용하여 참조할 수 있다

코멘트

html코멘트<!--머릿말--> css코멘트 /*소개*/

코멘트는 사실 브라우저가 무시하기 때문에 실제 결과물인 사이트에 반영이 되지 않는다. 하지만 복잡한 부분들을 설명함으로써 지저분해 보일 수 있는 코드를 정리해주는 중요한 역할을 한다. 몇 년 뒤에 자신이 쓴 코드를 확인했을 때, 또는 동료 개발자에게 코드를 보여줬을 때 코멘트로 설명이 잘 되어 있어야 이해하는데 도움을 줄수있다

텍스트 정렬

text-align 속성을 사용하면 텍스트를 왼쪽, 오른쪽, 또는 가운데로 정렬할 수 있다

text-decoration을 사용하면 텍스트를 몇 가지 방법으로 꾸밀 수 있다

  • overline 값을 사용하면 글 위에 줄이 그어진다.

  • line-through 값을 사용하면 줄이 글을 관통한다.

- none 값을 사용하면 아무 줄도 없다. 이게 기본 값이다

< a >태그와 사용

text-decoration을 가장 많이 사용하는 경우는 텍스트를 꾸미기 위해서가 아니라 꾸밈을 없애기 위해서이다. < a > 태그는 기본적으로 밑줄이 그어져 있는데, 이걸 없애기 위해서 text-decoration: none;을 사용한다.

폰트

폰트를 설정하는 방법으로는 절대적인방법과 상대적인방법이 있다

line-height를 사용하면 줄간격을 조절할 수 있다

font-family를 사용하면 글꼴을 변경할 수 있다

링크를 넣어준뒤 폰트를 설명하면된다

< span >태그

div는 내용물을 단독적인 새로운 줄에 놓는다 하지만 span태그는 월래 있던 글의 위치에 영향을 주지않는다

0개의 댓글