본문 바로가기

coding

 (66)
0526 / 내용 정리 * root : 어떤 위치가 아닌 기본 세팅(시작 전) 변수지정 : 원하는 값을 지정한 이름에 담기 (기능을 쓰기 위해 미리 등록함) 세팅 전 기본 : 16px - 12pt - 100% - 1em - 1rem
0525 / html & css 정리 - 오늘내용 정리 * margin, padding 을 % 사용시 - margin-left, margin-right에서 10%사용 시 자신의 부모값 기준 10%만큼 여백을 가짐. - margin-top, margin-bottom에서 10%사용 시 자신의 부모가 아닌, - 전혀 다른 영역을 기준으로 여백처리되기에 사용 X * 자식값에 float을 사용했다면 무조건 부모 값에 clear:both 사용! ---- * vendor prefix - 강제수행 - 기능 - 값 -webkit- : chrome, safari, whale, Edge -moz- : firefox -ms- : IE -o- : opera x : 해당없음
0525 / class="card" 내용 정리 이미지에 대한 설명 Lorem, ipsum. Lorem ipsum sit amet 상세보기
0524 / image 요소 * image - background-image : 기본형이 패턴처리 - background-size : contain; -> 이미지를 모두 보이게 / cover; -> 이미지를 완전히 감싸게 x수치 auto : 가로 (x수치)의 크기기준으로, 높이 크기는 자동설정 y수치 auto : 세로 (y수치)의 크기기준으로, 가로 크기는 자동설정 (단, 구형브라우저에서는 적용 x) - background-position : x좌표 (권장x) : left || center || right y좌표 (권장x) : top || center || bottom 좌표 : %, px, em, rem, vw, vh 등 단위를 사용!!! !!!! *** 반드시 해당하는 이미지가 움직인다 *** !!!! ---------------..
0524 / semantic 구조 - semantic 구조 이해 semantic 구조란? 각 영역에 해당하는 부분에 의미를 두고 제작하는 기법 header : h1, #gnb(global_navigation_bar) 영역을 담고있는 영역 nav : navigation 형태를 취하는 영역 aside : 있으면 좋고, 없어도 크게 불편하지 않은 영역 section : 주로 메인광고, 해당 내용이 별도로 연결되어있는 영역 article : 내용이 담긴 영역, 본문을 파악할 수 있는 영역 footer : 회사 또는 사이트의 정보(회사주소, copyright 등)를 담고있는 영역 - 기타 main : header/footer을 제외하고 본문의 내용을 담는 영역을 main으로 사용 하지만 보통의 시멘틱구조와는 성향이 다르므로 쉽게 쓰기 어렵다. f..
0520 / position.html & css 개념 - position 개념 정리 (position 은 정말 필요한 경우에 사용) position 기능은 마지막에 필요한 위치를 파악해서 각 위치의 설계를 한 다음에 사용한다. z-index 값은 가장 큰 범위에서부터 설계하는 것이 좋다. inline 요소 (특히 a, input, button 같은 focus 가 가능한 요소는 position을 사용하지 않는 것을 권장) * I.R 기법 (image replace 기법) - 해당하는 요소에 이미지를 글자로 대처하여 사용하는 기법 - 필요한 내용이지만 눈에 보이지 않게 처리하는 방법 - display:block; (사이즈를 가지고 밑으로 떨어트림) - width : 0 ; height : 0 ; - overflow : hidden ; - position : a..
0518 / margin,border,padding,outline.html & css 요소 작성 - margin,border,padding,outline.html 웹기초 margin, padding, border, outline 개념 margin margin_01 margin_02 margin_03 margin_04 padding padding_01 padding_02 padding_03 padding_04 padding_05 padding_06 padding_07 border border_01 border_02 border_03 border_04 border_06 outline outline_01 outline_02 outline_03 -------------------------------------------------------------------------------------------..
0517 / reset_and_common.css - reset_and_common.html DOCTYPE html> Document 웹기초 reset 세팅 html, body 에 들어가는 여백 초기화 div, 제목, 내용, 이미지, 리스트 여백, 선 초기화 list의 앞에 들어가는 list-style 제거 a요소의 글씨색, 밑줄 제거 ------------------------------------------------------------------------------- - reset.css @charset "UTF-8"; /* reset.css */ html, body { width:100%; height:100%; margin:0; padding:0; } h1, h2, h3, h4, h5, h6, p,pre,blockquote,address, ..

티스토리툴바