HTML&CSS (6) 썸네일형 리스트형 CSS 레이아웃 스타일: flex(flex-direction, justify-content, align-items 등), grid + box-sizing (display: flex) !레이아웃 배치 기능! 요소(item)들을 부모컨테이너안에서 유동적으로 배치하기 위해 flexbox에 넣는다. 부모요소는 flex container, 자식요소는 flex item flex container은 flex의 영향을 받는 전체 공간 flex의 속성은 컨테이너에 적용 or 아이템 적용 * 부모인 CONTAINER 적용 속성 일단 display: flex를 먼저 설정해 주어야 한다. - 가로 방향으로 배치 - width는 가진 내용물의 width 만큼 차지 - height는 컨테이너의 높이만큼 처음 자리 container 자리 잡을 때 inline이 block 으로 잡힘 CONTAINER 적용 속성 1. flex-direction 아이템 축 방향 설정 flex-direc.. CSS 요소영역이란? & 레이아웃 스타일: display, position + z-index & float * (요소영역: content + padding + border) + (요소 바깥쪽 영역: magin) 1. content : 내용물 2. padding : content와 border 사이 여백 3. border : 테두리 4. margin : 테두리 바깥 영역(타 요소와의 거리) * 블럭요소 / 인라인요소 https://anjoo.tistory.com/25 display 화면 배치 방법을 변경하는 CSS 스타일 inline, inline-block, block, flex, grid display: inline | inline-block | block 사용법 예시) display: inline 첫번째 두번째 세번째 display: flex 요소들을 flexbox에 넣어 유동적으로 배치 가능하도록 하는 .. HTML/CSS 블럭요소(div), 인라인요소(span), style선택자 + 선택자 우선순위 블럭요소 : p, pre, div 한 줄 단위로 영역 차지 줄바꿈 적용: 사용한 태그의 다음줄에 다음 영역 잡힘 인라인요소: b, mark, s, img, span content(내용) 영역에 해당하는 부분만 차지 줄바꿈 적용 X: 사용한 태그의 바로 옆에 영역 잡힘. 즉, 같은 줄 에 다음 영역 잡힘 style을 위한 선택자 1. 모든 선택자 : * 2. 태그 선택자 : 태그명 3. 아이디 선택자: #아이디 4. 클래스 선택자: .클래스명 예) li{ background: brown; } #id1{ color: aliceblue; } .class1{ color: green; } 기타 선택자 1. 속성선택자 속성을 적용할 요소에 미리 작성된 속성 선택 적용 * 선택자[속성=속성값] : 일치 * 선택자[속.. HTML 표만들기: <table>, <tr>, <th>, <td> 태그 * 표만들기를 위한 기본 태그 , , , : 기본 표 생성 : 한 행 : 한 열, 제목셀(글자 굵게, 가운데 정렬) : 한 열, 일반셀 * 셀병합 속성 : colspan, rowspan 예시) 이력서 사진 이름 홍길동 연락처 010-0000-0000 주소 경기도 군포시 ㅇㅇㅇ ㅇㅇㅇ 자기소개 안녕하세요 저는 ㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇㅇ HTML/CSS : id, class, name, value 속성 차이 정리 id class name value 목적 식별 식별 for 재사용 식별 for 서버전송 이름 지정 \with button, submit 속성 서버 제출 with checkbox, radio 속성 초깃값 설정 with text, password, number 속성 설명 고유한 영역 식별 공통적인 스타일 여러 요소에 적용 form 전송 이벤트 발생 시 서버로 데이터 전송 서버 제출 시 checkbox, radio 속성에서 name과 함께 key(name)=value(value)로 같이 넘어감 CSS사용 #id .class - - 참고자료 https://qna.programmers.co.kr/questions/7049/id-name-class-%EC%86%8D%EC%84%B1%EC%97%90-%EB%8C%80.. HTML 입력 양식 태그 정리 : input 태그, form 태그 입력양식 태그 * input 태그 : 사용자가 값을 입력할 수 있는 텍스트상자, 체크박스 등 → input 안에 type 속성 지정 가능 : text, password, radio, submit, reset 등 → value 속성으로 버튼 내 내용 적기 가능 → name 속성: 서버로 넘어가는 key 값(form 블럭 내에서) 아이디 : 비밀번호 : 성별 : 남 여 HTML 삽입 미리보기할 수 없는 소스 폼 태그 * form 태그 : 태그 블럭 내에서 사용 가능한 것들 → submit 버튼 클릭 : 해당 form 내 사용자가 작성값 서버로 넘어가며 필요 행동 요청 = action에 지정한 서버로 사용자 입력값이 넘어가며 요청(key=value 방식) → from 태그 안 action, method 속성 .. 이전 1 다음
