본문 바로가기

학원23

210930 필기내용 position에서 기준을 잡아주는 속성은 relative 그 기준에 맞춰 포지션을 넣는 것은 absolute + : 형제선택자 position 안에 position 또 사용 가능 / relative 기준 잡아놓은 것 잘 확인하기 인접 형제 선택자 + : 선택 요소 바로 뒤에 오는 요소 dt-title data_01 data_02 data_03 data_04 dt-title data_01 data_02 dt-title data_01 data_02 data_03 .siblings { width: 400px; height: 800px; margin: auto; border: 1px solid #777; } .siblings:hover dt { background-color: #ccf; } .siblings .. 2021. 10. 1.
210929 필기내용 position position static : 자신의 위치를 지킴 realtive : 자신의 위치를 지키고 위치 설정해주면 현재 자신의 자리로부터 배치됨, (자기 자신을 기준으로 맞춤) absolute : 자신의 위치를 잃어버리고 위치 설정해준 곳으로 고정됨, **스크롤 따라가지 않음** fixed : 자신의 위치를 잃어버리고 위치 설정해준 곳으로 고정됨, **스크롤 따라감** 위치 설정 top left right bottom z-index : 단위x html은 나중에 쓴 코드가 위에 배치됨 css css 불러오는 순서 : font/icon -> reset.css -> common.css -> design.css body { --color-gray1 : #c4c4c4; } css내부에 body안에 `c.. 2021. 10. 1.
210928 필기내용 html abbr 태그 : 축약형을 뜻하는 태그 마우스 올리고 있으면 뜻이 나타남 ex) html semantic 태그 (의미가 있는 태그) semantic 태그를 사용하면 role은 삭제 h태그 이용하여 이름 달아줘야 함 (footer는 자율) reset.css 에 display: block; 로 활용 (구형 브라우저 / html5에 새로 생긴 태그) semantic 태그 종류✔ : 웹페이지의 하단에 주요 정보를 담고 있는 부분 (기반이 되는 정보 / 회사의 정보)✔ : 요약본, 광고, 임시 목차✔ : 있어도 없어도 괜찮은 태그 / (최근 본, 장바구니, 탑으로 이동)✔ : 조형물에 대한 설명 (보여주는 것은 다 가능) 이미지에 대한 설명 ​ : figure의 제목 ✔ : 본문에 들어가는 태그를 단순히.. 2021. 10. 1.
210927 필기내용 속성 작성요령 ​ 존재유무/형태 ► display, overflow ​ 위치 ► position ​ 크기 ► width ⇒ height ​ 공간 ► margin ⇒ box-sizing ⇒ padding ⇒ border ​ 서체 ► font-weight, font-style, font-size, line-height, family.... ​ 배경처리 ► background-image, repeat, posion, size, clip .... ​ 기타효과 ► shadow, .... ​ 애니메이션 } float 사용하면 속성은 block로 바뀜 background-clip : 배경 색상을 칠하는 범위 content-box : 내용만 칠해라 padding-box : padding의 범위까지 칠해라 border-.. 2021. 10. 1.
반응형

티스토리툴바