이전 글에서는 container에 적용하는 속성들에 대해 알아봤다. 2023.04.03 - [수업] - 웹프로그래밍 - 4-2 Flexbox란? 웹프로그래밍 - 4-2 Flexbox란? 3/23 수업 container에 적용하는 속성들 display: flex; - 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width만큼 차지한다. - item을 inline으로 만듦. - height은 container의 높이만큼. display: inline codingtoday.tistory.com 아이템에 적용하는 속성들 1. flex-basis - flex 아이템의 기본 크기 설정 - flex-direction이 row일 때는 너비, column일 때는 높이 - auto: 해당 아이템의 width값..
3/23 수업 container에 적용하는 속성들 display: flex; - 아이템들은 가로 방향으로 배치되고, 자신이 가진 내용물의 width만큼 차지한다. - item을 inline으로 만듦. - height은 container의 높이만큼. display: inline-flex; - container를 inline으로 만듦. 더보기 inline-flex를 사용하지 않고 이전 페이지의 레이아웃을 구현하는 방법? 새로운 div를 만들어서 두 div를 감싼다. css에 display: flex를 추가한다. (felx-wrap : 줄 넘김.) flex-direction : 배치 방향 설정 - row, row-reverse, column, column-reverse flex-wrap: 줄넘김 처리 설정 -..
CSS(Cascading Style Sheets) : 텍스트 색상이나 크기, 이미지 크기나 위치, 표 색상, 배치 방법 등 웹 문서의 디자인 요소를 담당한다. 1. 스타일과 스타일 시트 style: 꾸미기 + 요소 배치 style sheet: html에 적용할 스타일들을 일괄적으로 정의한 것 스타일 형식 p { text-align: center; } p : 선택자(스타일 규칙이 적용될 대상) text-align: 스타일 속성 center : 속성 값 (속성/속성 값 쌍이 여러 개일 경우, 세미콜론(;)으로 구분) [ 스타일 지정 방법 ] 화면1을 만드는 3가지 방법이 존재한다. - 내부 스타일 시트 : 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것 html 코드 내부 스타일 시트 1번 2번 3번 ..
form 태그 [기본형] 여러 폼 요소 form 태그 속성 속성 설명 name 폼의 이름을 지정한다. 한 문서 안에 여러 개의 태그가 있을 경우, 폼들을 구분하기 위해 사용한다. action 태그 안의 내용들을 처리해 줄 서버 상의 프로그램을 지정한다. target 태그에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정한다. method : 사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정한다. get : 주소 표시줄에 사용자가 입력한 내용이 그대로 들어난다. 주로 데이터를 요청할 때(검색) 사용한다. URL 최대길이 2048, URL에 정보가 표시되어도 상관 없을 때 사용한다. 전송 속도가 빠르다. post : 대부분 사용하는 방식. 사용자의 입력을 표준 입력으로 넘..
*HTML : 구역 나눔. : 문단 : 제목. 뒷 숫자가 커질수록 글자 크기는 작아짐. 태그: 하이퍼링크 - href 와 함께 쓰임. (href는 속성) ex) 하이퍼링크 : src와 함께 쓰임. (src는 속성) ex) 태그: type과 함께 쓰임. (type은 속성) ex) -> 아이디 "password"는 안 보이는것. 버튼 선택자의 역할을 하는 class와 id : 선택해서 스타일이나 동작 부여 1) 단 하나만 존재하는 요소를 표현하기 위한 방법: ID 2) 비슷한 종류의 요소를 묶어놓는 방법: CLASS *CSS :메마른 HTML 태그에 색칠을 하는 역할 *****vscode 단축키***** 내파일 Ctrl + N 저장 Ctrl + S 들여쓰기 Tab 내어쓰기 shift + Tab 주석 Ctrl+/
