본문 바로가기

전체 글

 (32)
2022-10-25 [새싹 프론트엔드] 목록태그 강의 내용 목록태그 list 리스트 꾸미기 내비게이션 바 - 순서가 있는 리스트(ordered list) - 순거가 없는 리스트(unordered list) - 정의 리스트(definition list) 리스트 꾸미기 padding-left 가 기본적으로 들어가 있다. 내비게이션 바 우리가 흔히 사용하는 웹 사이트의 메뉴 주로 HTML의 링크 태그 를 사용하여 생성 수평 메뉴 만들기 1. display: inline-block을 준다. 2. float 속성을 사용한다. display: inline-block; 장점 1. 부모가 자식의 높이를 인식한다. 2. 사용하기쉽다. 단점 1. 자식간의 여백이 발생해서 정교한 디자인엔 어울리지 않는다. 2. 계산값을 잘못주면 레이아웃이 탈락한다. display: in..
2022-10-24 [새싹 프론트엔드] 테이블, CSS 레이아웃 강의정리 2022-10-24 학습내용 정렬 One True 레이아웃 절대위치 고정위치 글자생략 테이블 테이블 생성하기 테이블 병합하기 테이블 꾸미기 수평으로 요소정렬 float: left; , float: right; 를 주게 된다면 중앙 정렬이 불가하다. 왜냐면 float속성을주면 왼쪽 혹은 오른쪽으로 딱 붙는 성질이 있기 때문이다. 수평 가로 정렬일 경우 이럴때 float를 준 해당 태그의 부모태그에 width를 float와 같게 맞춰준 후 margin: auto; 를 주면 float받은 자식속상이 margin을 준 부모태그를 따라서 가운데로 이동한다. 수직 세로 정렬일 경우 (float를 받은 요소는 inline요소가 된다.) 부모요소에 line-height: 부모의 높이값을 주면 해당 컨텐츠 안에 있는 요..
2022-10-21 [새싹 프론트엔드] 강의정리 2022-10-21 강의 내용 위치속성 z-index 속성 overflow 속성 float 속성 position속성 -position 속성의 값은 body안쪽으로 움직이는건 + body 바깥으로 움직이는건 -이다. static 기본값 relative 본인자리 기준, 본인자리는 두고 본인만 움직인다. absolute static 이 아닌 부모의 기준대로 움직인다. 없으면 그 위의 부모 없으면 그 위의 부모를 계속 찾아가다가 끝까지 모~든 부모가 static 이면 body를 기준으로 잡는다. block요소라해도 inline처럼 본인 자리만 차기하게된다 fixed 고정된 위치 z-index 속성 이 아닌 요소들간 위아래 배치 순서를 정한다. 를 쓰지않았을때 기본 적용값 = auto(0과 같다) 음수양수 전부 ..

티스토리툴바