zim's growth dairy

label 과 radio를 사용하여 클릭시 박스가 보이도록 구성 HTML Comunication Scheduling Messages Live Chat Communicate with ease Uniquely underwhelm premium outsourcing with proactive leadership skills. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum, urna eu pellentesque pretium, nisi nisi fermentum enim, et sagittis dolor nulla vel sapien. Vestibulum sit amet mattis ante. Ut placerat dui eu n..

https://themewagon.com/themes/restoran-free-responsive-bootstrap-5-restaurant-website-template/ Restoran - Free Bootstrap 5 Restaurant Website Template Restoran is a free Bootstrap restaurant website design that is clean and modern. It is designed for restaurants, and other food-related websites. themewagon.com 위의 사이트에서 웹사이트를 다운받아 CSS를 비슷하게 작성해보았다.

- box-sizing 속성 값 의미 기본값 content-box 너비(width, height)만으로 요소의 크기를 계산 content-box border-box 너비(width,height)에 안쪽 여백(padding)과 테두리 선(border)를 포함하여 요소의 크기를 계산 * border-box padding값과 margin 값을 포함하여 요소의 크기 결정 - display 속성값 의미 blcok 블록 요소( 등) inline 인라인 요소( 등) 기타 table, table-cell, flex 등 none 요소의 박스 타입이 없음(요소가 사라짐) * 인라인→블럭 하는 이유 크기 조정을 위해 요소 변경한다. (인라인 요소는 크기 조정이 안된다(width, height)) * flex 인라인 요소로 ..

HTML 작성 순서 1. 칸 나누어준다. (div 갯수 파악하고 작성한다.) 2. 부모안에 자식 갯수 파악하고 나누어준다. 3. 각 칸에 요소값 부여한다. (id or class) CSS 순서 1. UI 구조분석한다(네모로 칸 구별함) 2. HTML 코드 생산 3. *(Universal Code)로 상속시킬 값 작성 (*는 전체에 상속됨) 4. Tag 선택 5. 부모 / 자식 관련 설정 부여 5-1 부모의 경우 display, justify-content, align-items 값을 부여한다. 5-2 자식의 경우 position, padding, margin으로 세부 위치 조정한다. HTML hi! 안녕하세요! Contact Me Service Offers 안녕하세요 저의 기술 스펙을 전달해드리겠습니다...

- 가시성 속성 어떤 요소를 보이게 하거나 반대로 보이지 않게 할 때 사용한다. ex ) visibility : hidden; (자리를 차지함) - 디스플레이 속성 가시성 속성과 반대로 요소가 차지하는 공간도 사라진다. ex ) display : none; (존재자체가 없음) display - none : 사라진다. - inline : 가로배치 (width , height X) - blcok : 세로 배치 (width, height O) - inline-block : 가로배치 + width , height (가로배치+크기조절) - 블록 형식 다음 요소가 항상 새로운 행에서 시작되며 화면의 최대 너비만큼 차지한다. - 인라인 형식 다음 요소가 이전 요소 바로 뒤에 배치되며 최소한의 너비만 가진다. 예제 8..

작성 절차 1. HTML 코드 작성 2. 가로 / 세로 배치 - 정렬 : 부모 → 자식 (display:flex; 자식을 가로 세로 정렬한다.) - 정렬 : 자기자신(스스로 위치 잡음) position : relative, absolute margin, padding 3. width X / height X (자기자신꾸미고 text 꾸밀때 사용) 4. background-color 주기 HTML itedunet Home Serviceoffers Skills Work Testimonials Contact CSS *{ font-family: 'Hahmlet', serif; list-style: none;/*li의 스타일을 없앰*/ margin: 0px; padding: 0px; /*margin과 padding..

- z-index - 한 요소 위에 다른 요소를 쌓을 때 사용 - z-index 속성값이 작을수록 아래에 쌓임 (z-index:3은 3층으로 보고 z-index:1이면 1층으로 생각하면됨 그럼 3층 사이에 위치하게 됨) 예제 7-17 HTML 코드 box #1 box #2 box #3 CSS 코드 #box1{ position:absolute; top: 0px; left: 0px; width: 100px; height: 100px; background: blue; z-index: 3; } #box2{ position: absolute; top: 30px; left: 30px; width: 100px; height: 100px; background: yellow; z-index: 2; } #box3{ pos..

- UI 요소 상태 가상 클래스 선택자 - 입력 폼의 상태를 선택할 때 사용한다. UI 요소 상태 가상 클래스 선택자의 종류 사용 방법 의미 E:enabled 사용 가능한 폼 컨트롤 E를 선택한다. E:disabled 사용 불가능한 폼 컨트롤 E를 선택한다. E:checked 선택된 폼 컨트롤을 선택한다. E:focus 초점이 맞추어진 input 태그를 선택한다. 기타 가상 클래스 선택자 선택자 이름 사용 방법 의미 언어 선택자 E:lang(ko) HTML lnag 속성의 값이'ko'로 지정된 태그를 선택한다. 부정 선택자 E:not(S) S가 아닌 E 태그를 선택한다. 목적 선택자 E:target E의 url이 요청되면 선택한다. 가상 엘리먼트 선택자 E::firt-line E 태그의 첫번째 라인을 선..