이전 글에서는 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: 줄넘김 처리 설정 -..
가상클래스와 가상 요소 가상(pseudo): html 문서에 코드로 명시되어 있지 않지만, 사용자 동작에 반응하는 가상 클래스 표기 설명 :link 방문하지 않은 링크에 스타일 적용 :visited 방문한 링크에 스타일 적용 :hover 웹 요소에 마우스 커버를 올려놓을 때의 스타일 적용 :active 웹 요소를 활성화했을 때의 스타일 적용 :focus 웹 요소에 초점이 맞추어졌을 때의 스타일 적용 UI 요소 상태에 따른 가상 클래스 표기 설명 :enabled, :disabled 요소를 사용할 수 있을 때와 없을 때의 스타일 지정 :checked 라디오 박스나 체크 박스에서 해당 항목을 선택했을 때의 스타일 지정 구조 가상 클래스 1. :nth-child(n) : 앞에서부터 n번째 자식 요소에 스타일을 ..
CSS(Cascading Style Sheets) : 텍스트 색상이나 크기, 이미지 크기나 위치, 표 색상, 배치 방법 등 웹 문서의 디자인 요소를 담당한다. 1. 스타일과 스타일 시트 style: 꾸미기 + 요소 배치 style sheet: html에 적용할 스타일들을 일괄적으로 정의한 것 스타일 형식 p { text-align: center; } p : 선택자(스타일 규칙이 적용될 대상) text-align: 스타일 속성 center : 속성 값 (속성/속성 값 쌍이 여러 개일 경우, 세미콜론(;)으로 구분) [ 스타일 지정 방법 ] 화면1을 만드는 3가지 방법이 존재한다. - 내부 스타일 시트 : 웹 문서 안에서 사용할 스타일을 문서 안에 정리한 것 html 코드 내부 스타일 시트 1번 2번 3번 ..
*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+/
