# Flex
TIL(2022. 05.16) -Flex
flex flex를 사용하기 위해서는 일단 플렉스를 사용할 부분을 컨테이너로 묶어줘야 된다. 배치하려는 요소들은 아이템이라고 한다. 부모 컨테이너에 설정할 수 있는 속성 display: flex container에 display: flex; 값을 준다. float와
TIL16) CSS 마스터..하고싶다...
요즘 til쓰는것에 현타가 왔다. 고작 16번째 인데 나란인간..쉽게 질리는 인간이다..쓰기 싫다기 보다는 쓰고 싶은데 잘쓰고 싶다. 썸네일도 만들고 하고싶은데 기깔나는 아이디어가 안나온다...계속 고민중이다... 가장중요한것 중하나가 flex는 두가지 요소로 나누어진
Flex로 display 해버리기 [flex-direction]
Flex에는 Flex items와 Flex container가 있다.flex의 속성들을 flex-items를 flex-container를 기준으로 어떻게 배치할 것인가에 대한 설정이 필요하다. 따라서 모든 flex 속성은 flex-container에 작성한다.flex-
[2022.05.22] 자바스크립트 채팅 앱 만들기 #2 - 나머지 완성하기
어제 간단한 채팅을 구현했었는데 이제 스타일링과 나머지 부족한 부분을 채워넣는 작업을 마저 진행하고자 한다.노드 서버는 잠시 끄고 index.html을 라이브 서버로 켜주었다.css 스타일을 입혀서 작업할 것이기 때문에 html의 요소를 추가 및 수정하였다.li 태그
[2022.05.21] 자바스크립트로 채팅 앱 만들기#1 - 간단하게 구현하기
자바스크립트를 어느정도 알고 있다면 채팅 앱을 어렵지 않게 만들수 있다는 말에 데브리님 강의를 보며 따라 만들어 보기로 했다.라이브러리는 express, socket, moment를 설치하고 시작했다.src 폴더를 만들어서 index.html 템플릿과 내용을 간략하게
TIL 07. (1주차)flex
정렬 할 요소들의 부모 요소에 display: flex를 선언하여 요소들을 정렬하는데 사용.첫번째 자식에 해당하는 요소에만 flex가 적용된다.flex-start : 요소들을 컨테이너의 왼쪽으로 정렬flex-end : 요소들을 컨테이너의 오른쪽으로 정렬center :
20220509-day1-학습목표
\-HTML(Hypertext Markup Language)는 웹 페이지를 만들기 위한 언어로 웹페이지를 구조를 잡을 수 있습니다. HTML 파일은 이미지, 텍스트, 비디오, 버튼 등 웹사이트에 보여줄 내용을 구성하고 있으며 브라우저(chrome, safari, ie,
HTML, CSS를 사용하여 계산기 목업 만들기
간단한 계산기를 구현하기위해서첫 단계로 Html로 뼈대를 구현하였다화면으로 보여지는 각 줄마다에 새로운 class를 지정하여 자식요소로 그에 할당하는 button 형식으로 숫자와 사칙연산을 넣었다.그리고 css를 입히는데 주로 flex를 사용하여 배치를 하고 내가 만들
[개발자되기: 계산기 mock-up 만들기 1] Day-8
전체 html css ① 부분 html css ② 부분 html css ③ 부분 html css
[개발자되기:css flex] Day-7
웹 또는 앱 개발할 때 레이아웃의 뼈대를 그리는 단계. "와이어로 설계된 모양"을 의미하며 단순한 선이나 도형으로 웹이나 앱의 인터페이스를 시각적으로 묘사한 것. 와이어프레임 단계에서는 전환효과나 에니메이션, 사용자 테스트 같은 스타일링 요소나 UX를 판단하지 않음.실
display: flex
display: flex 기본 세로 정렬에서 안에 있는 내용 물을 가로로 정렬할 수 있도록 도와줌 justify-content: 종류 center 모든 요소들 중간 정렬 flex-end 마지막 정렬 flex-start 시작 정렬 space between 간격을 만
Flex 속성의 하위 속성
각 아이템들의 시각적 나열 순서를 결정하는 속성숫자값이 들어가며, 작은 숫자일 수록 먼저 배치 “시각적” 순서일 뿐, HTML 자체의 구조를 바꾸는 것은 아니므로 접근성 측면에서 사용에 주의 요망!시각 장애인분들이 사용하는 스크린 리더로 화면을 읽을 때, order를
2022 04 29 CSS
수직 정렬을 할 때 쓴다.hover는 마우스를 올렸을 때 다른 동작을 하도록 만드는 것이다.그냥 hover를 쓰는 것은 문제가 없으나, 호버 해당 부위를 설정할 때는 이런 식으로 써야한다.여기서 자세히 보기https://studiomeal.com/archive
CSS _ flex
CSS의 flex는 엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구입니다. 지금까지 레이아웃과 관련된 다양한 속성들이 있었지만 그리 효과적이지 않았습니다. flex를 이용하면 레이아웃을 매우 효과적으로 표현할 수 있습니다. 아래 영상에서는 flex가 도입된 배경을 설명합
css display : flex 완벽 정리
display에 flex를 설정해 주면 코드의 자식 요소가 가로 정렬로 바뀌게 됩니다.정확히 말하자면 수평된 주축을 기점으로 시작점에서 끝점 방향으로 자식 요소들이 정렬하게 됩니다.여기서 flex를 설정해준 코드는 flex container, 설정해준 코드의 자식 요소
Flex Container & Items (CSS)
Flex flex 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성이다. 즉 레이아웃 배치 전용 기능이다. 우리가 보는 웹페이지 대부분의 경우가 수직 나열이다. block 요소의 특성으로 수직 나열