본문 바로가기

css기초

[HTML/CSS 기초 강의] ⑭ <span> 태그 오늘은 태그에 대해 알아보려고 한다. CSS: HTML 문서에 스타일(글자색이나 크기, 문단 정렬 등)을 입힐 때 사용 HTML에 CSS를 적용하는 방식 3가지 1. 각 태그에 style 속성 하나하나 지정하는 인라인(inline) 방식 2. 태그 안에 태그를 쓰고 그 안에 스타일 관련 코드를 모두 넣는 내부 스타일시트(Internal CSS) 3. 독립된 별도의 파일에 스타일 지정하는 외부 스타일시트(External CSS) 적용- 1번 인라인 방식으로 글자 크기 변경 인라인 방식으로 스타일 속성 지정하는 방법 태그 태그 전체가 아니라 태그 안에서 일부 글자만 크기 변경 예) 태그 안의 '여기만 type size 크게 ' 부분만 글자 크기 3배로 하려면? ​1. 태그 태그 안에는 글자 크기를 그대로 두.. 더보기
[HTML/CSS 기초 강의] ⑬ 선택자 selector 오늘은 선택자 selector에 대해 알아보려고 한다. 선택자(selector)- 스타일 적용 대상 지정/css 핵심 개념 내부 스타일 시트는 부분에, 외부 스타일 시트는 별도의 파일에 스타일 관련 코드 입력함. 웹 페이지 전체에 동일한 스타일 적용하면 문제가 안되지만, 일반적으로 웹페이지 각 부분마다 다른 스타일을 적용 ​예) 상단에는 바다 배경에 글 오른 정렬, 또 하단에는 배경 없이 일러스트 삽입에 왼쪽 정렬과 같이 부분적으로 다른 디자인인 경우, 각 스타일을 어디에 적용할지, 범위 지정해 줄 필요 있음 ​ ​1. 전체 선택자 어떤 스타일을 웹 문서 전체에 적용할 때 사용 *{속성명:속성값;} ​ 2. 태그 선택자 특정 태그에 스타일 적용할 때 사용 태그 선택자를 사용하면 같은 이름을 가진 태그 모.. 더보기
[HTML/CSS 기초 강의] ⑫ HTML에 CSS적용 오늘은 HTML에 CSS적용에 대해 알아보려고 한다. 웹 문서(HTML)에 CSS로 디자인 적용 방법 ① 인라인 (Inline CSS) - HTML 태그에 직접 적용 ② 내부 스타일 시트(Internal CSS) - 태그에 스타일 정의 ③ 외부 스타일 시트(External CSS) - 별도 파일 호출 1. 인라인 (Inline CSS) HTML 본문, 각 태그에 직접 CSS 코드를 입력하는 방식 html 태그 안에 style 속성을 직접 지정 장점: 가장 직관적이기 때문에 초보자 입장에서 익숙하고 편함 but CSS가 생긴 이유? 태그마다 스타일을 지정하는 것이 복잡하고 번거로움( Inline 방식) ​2. 내부 스타일 시트(Internal CSS) HTML 문서는 와 로 구성 는 웹 페이지에는 직접 표.. 더보기