본문 바로가기

HTML,CSS6

CSS_색상, 박스모델, 포지션과 레이아웃 CSS에서 색상 표현하는 방법 색이름으로 표현하기 16진수 표기법으로 표현하기 16진수 표기법으로 표현하기-2- 무채색으로 표현하기 박스모델 모든 HTML 엘리먼트(태그) 박스처럼 다루어진다 화면 디자인, 화면의 레이아웃을 구성할 때 HTML 엘리먼트(태그)를 박스처럼 다루게 되는데, 이를 박스모델이라고 한다 박스모델의 구성 HTML의 모든 엘리먼트(태그)는 margin, border, padding, content로 구성된다 margin 테두리(border)의 바깥여백, 다른 엘리먼트와의 경계 border 엘리먼트의 테두리, padding과 contents를 감싸고 있다 padding 테두리(border)와 contents 사이의 여백, contents를 감싸고 있다 contents 박스모델이 가지는 .. 2023. 12. 28.
CSS_CSS, 선택자와 선택자 종류 CSS(Cascading Style Sheets) HTML 문서가 웹브라우져의 화면, 인쇄물 혹은 여러 미디어에 어떻게 표현될지를 정의하는 언어다 CSS는 화면의 레이아웃, 텍스트 형식, 애니메이션 효과, 3D효과 등을 설정할 수 있다 HTML 문서에 대한 디자인적인 요소를 담당 CSS 문법 Selector(선택자)Declaration(CSS 선언) h1 {color:blue; font-size:12px;} * 선택자 스타일을 적용할 대상 엘리먼트(태그)를 지정한다. * CSS 선언 선택자에서 지정한 엘리먼트에 적용할 스타일을 선언한다. 각각의 CSS선언은 세미콜론으로 구분한다. CSS선언은 PropertyName:PropertyValue로 구성된다. CSS 적용방법 Inline CSS 하나의 엘리먼트에.. 2023. 12. 27.
HTML_inline과 block, id와 class 블록 엘리먼트(태그) 항상 새로운 줄에서 시작 항상 사용가능한 최대 너비를 차지한다 블록 엘리먼트의 왼쪽이나 오른쪽에는 다른 엘리먼트가 위치할 수 없다 블록 엘리먼트의 너비를 지정할 수 있다 블록 엘리먼트의 컨텐츠에 대해서 정렬할 수 있다 대표적인 블록 엘리먼트 종류 ~ div 엘리먼트 컨테이너 엘리먼트 컨테이너 엘리먼트는 다른 엘리먼트를 담는 용도로 사용되는 엘리먼트다 컨테이너 엘리먼트는 여러 엘리먼트를 묶어서 하나의 그룹으로 다룰 수 있게 한다 모든 블록 엘리먼트와 모든 인라인 엘리먼트를 포함할 수 있고, 다른 div 엘리먼트도 포함할 수 있다 html 문서에서는 div 엘리먼트를 사용해서 여러 엘리먼트를 그룹으로 묶고, 그룹단위로 스타일 적용, 엘리먼트 조작 등을 수행한다 인라인 엘리먼트(태그) 새.. 2023. 12. 26.
HTML_태그의 종류(table,img) table 태그 표를 만들 때 사용하는 태그다. table 태그의 주요 태그 표를 정의하는 태그다 표의 헤더부를 저의하는 태그다 표의 바디부를 정의하는 태그다 표 내부의 행(table row)를 정의하는 태그다 행 내부의 제목 셀(table heading)을 정의하는 태그 행 내부의 일반 셀(table data)을 정의하는 태그 thead와 tbody는 표의 헤더부와 표의 바디부를 구분해서 각각 다른 스타일을 적용하거나 혹은 스트립트에서 바디부만 조작하기 위해서 사용 table 태그 사용예시 부서정보 부서아이디 부서이름 부서관리자 10 총무부 김유신 20 기술부 강감찬 30 영업부 이순신 학생정보 학번 학과 학년 이름 100 컴퓨터공학과 3 이순신 101 컴퓨터공학과 3 강감찬 103 기계공학과 1 류관.. 2023. 12. 22.

티스토리툴바