웹(4)
-
Day4 VSCODE_CSS Flex
🟡Flex 레이아웃 - 수평정렬을 하기 위한 속성 - 사용법: display: Flex 🟡Flex-wrap -플렉스 라인에 여유가 없을 때 플렉스 요소의 위치를 결정하는 속성 -no-wrap: 기본값. 플렉스 요소가 다음줄로 넘어가지 않음. 요소의 너비를 줄여 한 줄에 배치 -wrap: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김 -wrap-reverce: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김(단 -위쪽으로 넘김) 플렉스 레이아웃1 플렉스 레이아웃1 1 2 3 예시) nowr 🟡Flex-direction -플렉스 요소들이 배치되는 축의 방향을 결정하는 속성 -row: 기본값 (가로배치) -row-reverce: 가로배치(반대로) -column: 세로배치 -column-reverse: 세..
2023.03.30 -
Day3 VSCODE_CSS Z-Index + Float + Clear
Z-index - HTML 요소의 위치를 설정하게 되면 위치 및 방식에 따라 요소가 겹칠수 있음 - 겹치는 요소들이 쌓이는 순서를 결정할 때 z-index를 사용 - 순서는 숫자의 크기가 클수록 위에 위치하고 작을 수록 아래 위치 하게 됨 z-index 1번째 div 2번째 div 3번째 div Float - html 요소가 주변(수평으로 나열된)의 다른요소들과 자연스럽게 어울리도록 만들기 위해 사용 - float를 적용받은 요소의 다음에 나오는 모든 요소들이 끌어올려짐 - float를 적용받은 요소들의 방향을 결졍(left,right) - 컨텐츠 크기 만큼만 영역을 설정(블록태그) - float를 적용받은 요소는 다른 요소보다 위쪽에 위치한다(배경보다 위) float2 박스-1 박스-2 박스-3 박..
2023.03.29 -
Day3 VSCODE_CSS 마진+ 박스사이징 + 디스플레이 + 포지션
마진(Margin) - 테두리(border)와 이웃하는 요소들의 간격 - 마진은 눈에 보이지 않음 - 세로 겹침 현상이 일어난다. ✔ 세로 겹침 현상 세로로 나열된 두 박스의 간격은 두 마진의 합이 아니라 둘 중 더 큰 값을 선택하는 현상 박스사이징(Box-Sizing) - width, height 값에 padding border영역은 포함되지 않는다.(content 크기만!) - 만약content width가 100%로 설정되는 경우 padding이나 border 속성을 사용하면 content가 찌그러진다. - box -sizing속성값을 border-box로 설정하면, width와 height값에 padding과 border를 포함 -> 한마디로 찌그러지지 않는다. 디스플레이 - 웹페이지의 레이아웃을..
2023.03.29 -
Day 1_VSCODE_HTML 기초
✔개념 클라이언트(Client) 서버로부터 서비스나 데이터를 요청하는 컴퓨터 서버(Server) 데이터를 포함하거나, 네트워크의 다른 컴퓨터에서 엑세스 기능을 제공하는 컴퓨터 - 클라이언트 사이드 언어 HTML: 클라이언드에서 동작하는 언어 (Hyper Text Markup Language) HyperText(웹 페이지에서 다른 페이지로 이동 할 수 있는 것)기능을 가진 문서를 만드는 언어 비슷한 언어 : CSS,Javasript CSS- html을 보안에서 디자인적으로 보완 Javasript는 웹페이지 수정 변경 및 다이나믹 효과 제공 ✔HTML 문서 특징 - 확장명이 .html로 저장된다. - 대소문자를 구별하지 않음 - 프로그래밍 언어가 아님 - 문서를 작성할 수 있는 에디터라면 어디서든지 작성 가..
2023.03.23