[html-css] 줄간격 정렬, 밑줄 (text-align-decoration,line-height) 04

[html-css] 줄간격 정렬, 밑줄 (text-align-decoration,line-height)

웹프로그래밍 입니다.

CSS는 캐스케이딩 스타일 시트의 약자로 HTML과 함께 사용되어

페이지를 더 효율적으로 꾸밀 수 있게 해줍니다.

이를 활용하면 더 풍부한 디자인가 사이트 유지보수가 가능합니다.

위와 같이 작성된 CSS는 라인 8번에서 17번까지 작성되어있습니다.

style태그로 감싸서 설정해 주면되고

이때 사용 방법은 선택자{ 속성 : 값; . . .} 이런 식으로 적용하면됩니다.

위에작성된 방식은 내부스타일시트 방식입니다.

내부스타일 시트는 html문서의 head태그 안에 스타일시트가 삽입된 것을 뜻합니다.

추가적으로 바디태그 안에서 속성 에서 바로 style을 적용시켜주는 것과

인라인스타일시트

외부스타일 시트로 CSS를 삽입하는 방식이있습니다.

예를 들어서 티스토리 블로그는 스킨 적용시 html파일과 css파일이 따로 분리되어있는 것을 알 수 있습니다.

이 처럼 블로그나 큰 사이트 들은 대부분 html파일과 css파일을 분리하여 관리한다고 보시면됩니다.

제 티스토리 스킨 html/css편집기를 들어가본 모습입니다.

43,44번 줄을 보게되면 link태그를 통해서 css파일을 링크하는 것을 확인할 수 있습니다.

스타일과 폰트를 따로 분리해서 관리하는 것을 보면

어러가지 css파일을 html에 사용할 수 있는 것을 알 수 있습니다.

이렇게 css를 사용하는 방법 3가지를 알아보았고

위에 작성된 코드를 저장하고 실행해보면 아래와 같은 결과가 나오게 됩니다.

h3태그의 경우에는 text-align 속성이 사용되어 값은 center이므로 가운데 정렬이되었습니다.

추가적으로 text-decoration속성의 값은 underline으로 되어 밑줄이 생긴것을 알 수 있습니다.

언더라인외에도 위에 줄이 생기는 overline속성과 삭선이 생기는 line-through속성 등이 추가로 있습니다.

color속성에서는 red를 사용해서 색상이 빨간색인 것을 알 수 있습니다.

(컬러 속성으로 사용할 수 있는 값은 blue,black,white, green, gray, yellow, purple 등이 있으며

#을 이용한 rgb색상 코드를 사용할 수 있습니다.

문단 태그인 p태그에는 줄간격을 선택할 수 있는 line-height속성을 사용해서

줄간격을 150%로 지정했습니다.

이 뜻은 줄간격을 150% 즉 1.5배로 출력한다는 뜻입니다.

첫 번째 사진결과는 줄간격 150% 그 밑에는 100%인데

결과를 보면 그 차이를 확실하게 알 수 있습니다.

줄 간격 지정시에는 주로 퍼센트를 많이 사용하게 되지만,

px단위로 설정해도 상관없습니다.

하지만 단위를 안쓰게되면 글이 출력안될 수 있기 때문에

꼭 단위는 써야합니다.

이렇게 CSS에서 줄간격, 정렬, 밑줄 하는 방법을 알아보았습니다.

▣ H태그 파해치기 이걸 왜 써 03

▣HTML a태그 속성(href, target,id 속성) 뽀개기 02

▣HTML 기본 태그와 문서 구조 01