전체 글(192)
-
CSS 속성 종류 _float_nav 만들기_CSS
nav 만들기 home login menu1 menu2 menu3 menu4 컨텐츠
2021.12.15 -
CSS 속성 종류 5_CSS
float, clear - 블럭요소 배치(레이아웃 배치) 할 때 쓰인다. - float : 좌우 블럭요소 배치, 좌우 정렬 가능, 설정된 높이가 인식이 잘 안됨 적용 안된 대상들은 float 설정된 대상의 높이를 인식하지 못한다. 1) float 적용 대상은 넓이 높이가 설정이 안되어 있다면 컨텐츠의 크기 만큼만 설정된다. - float 적용 대상의 부모 태그를 생성한다. 2) flot 적용된 자식요소에 의하여 상위태그는 높이를 인식하지 않는다. 1. clear : both; -> float 적용 해제 2. display : inline-block; 부모태그를 inline-block 변경 3. overflow : hidden; 부모 태그에 높이와 넓이를 설정하지 않고 사용 4, 부모 태그에 높이 설정 다..
2021.12.15 -
CSS 속성 종류 4_CSS
display - 선택된 대상의 inline, block, inline - block, none 처리 - inline : 인라인 오쇼 변경 - block : 블럭 요소 변경 - inline - block : 높이와 넓이를 가지는 인라인 요소로 변경 - none : 화면 미 노출 display none inline inline > block inline > inline-block line-height - 텍스트(인라인 요소) 세로 간격 설정 .lineheight01{line-height:25px; } list-style - 불릿 변경 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요.
2021.12.15 -
CSS 속성종류 3_CSS
기본설정 position, z-index - position : 블럭요소 배치 옵션 설정 absolute position 값이 설정된 relative 부모태그 기준으로 절대 위치에 배치 fixed 디바이스 크기의 절대 위치에 배치 - z - index : 블럭요소 앞뒤 정렬 옵션 ( 높은 수가 제일 앞으로 ) - top : 상단 절댓값 - left : 왼쪽 절댓값 - right : 오른쪽 절댓값 - bottom : 하단 절댓값 .position01{ position:absolute; top:10px; left:10px; background-color:red; }
2021.12.15 -
CSS 속성 종류2_CSS
기본 설정 div {border 1px solid #000;} padding 안녕하세요. 안녕하세요. - 안쪽 여백, 전체 혹은 상하좌우 별도 안쪽 여백 설정 가능 .my-padding01 {padding:10px;} .my-padding02 {padding-left:20px;} margin 안녕하세요 - 밖 여백, 전체 혹은 상하좌우 별도 밖 여백 설정가능 - 고정적인 사이즈 .my-margin01{margin:20px;} .my-margin02{margin-top:30px;} width, height - 블럭요소의 가로, 세로 사이즈 지정 .my-size01{width:500px;heighit:300px;} 인라인 요소 테스트 .my-size01{width:500px;height:300px;} }..
2021.12.15 -
HTML실습CSS 선택자 및 CSS 속성 종류 실습_CSS
각 공지사항의 타이틀은 빨강색상, 자유게시판 타이틀은 파랑색상, 모든 표의 행 하단 밑줄이 표현되도록 style 적용하여라. css 선택자 및 css 속성 종류 실습 공지사항 제목 제목입니다. 자유게시판 제목 제목입니다. 답
2021.12.15