FlexBox

 

 Display:flex; 는 부모박스에 적용시켜, 자식 박스의 방향과 크기를 경정하는 레이아웃 구성방법

 

요소의 절렬, 요소가 차지하는 공간 설정가능

 

 

 

부모요소에 적용해야하는 속성

 

Flex-direction - 자식 요소들을 정렬할 정렬축 설정( 설정하지않은면 기본적으로 가로정렬.)

flex-wrap - 줄바꿈 설정 

속성은 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정합니다

(설정하지않으면 줄이바뀌지 않음)

justify-content -  flex-start , flex-end, center, space-between, space-around

 

align-items - 속성은 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정합니다. 요소들이 

가로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 

있다면 가로 방향으론 어떻게 정렬할 것인지 정하는 속성입니다.

 

 

 

 

 

 

 

자식요소에 적용해야하는 속성

 

Align-self - align-items로 교차축(cross axis) 아이템 정렬을 정한다

Order -  배치순서를 설정할수 있다.

Flex-grow - 비율적으로  빈공간을 나눠갖는다. 

'HTML&CSS' 카테고리의 다른 글

CSS 기초  (0) 2023.04.13
HTML 기초  (0) 2023.04.12

Css  스타일 적용하는 3가지

- 인라인 스타일
<h2 style="color:green; text-decoration:underline”>

- 내부 스타일 시트
<style>
        body { background-color: lightyellow; }
        h2 { color: red; text-decoration: underline; }
     </style>

- 외부스타일 시트 
<link rel="stylesheet" href=“/examples/media/expand_style.css”>

Selector 


* { } - 전체 문서의 모든요소 선택 
h1 { }  -  전체 h1 모든 요소 선택  혹은 h1 section { } 다중선택이 가능.
#only - 특정 id로된 문서 선택. 
.class - 특정 class 로된 문서 모두 선택
p[id=“only"] { } - attribute 셀렉터는 같은 속성을 가진 요소를 선택

header > div { } - 자식 셀렉터는 첫 번째로 입력한 요소의 바로 아래 자식인 요소를 선택
header div {} - 후손 셀렉터는 첫 번째로 입력한 요소의 모든 후손을 선택 (header에서 div 사이에 있
는 문서는 제외하고 div 선택 )

section ~ p { } - 형제 셀렉터는 첫 번째 입력한 요소 뒤에 오는 두 번째 입력한 요소를 
모두 선택합니다. (첫번쨰  section 아래에 있는 p 태그 모두 선택 )

section + p {} - 인접 형제 셀렉터는 같은 부모 요소를 공유하면서, 첫 번째 입력한 요소 바로 뒤에 오
는 두 번째 입력한 요소를 선택합니다. 예시의 경우 <section> 요소 뒤에 있는 
세 개의 <p> 요소 중 첫 번째 <p> 요소를 선택합니다.

a:link { } /*사용자가 방문하지 않은 <a>요소를 선택합니다.*/
a:visited { } /*사용자가 방문한 <a>요소를 선택합니다. */
a:hover { } /* 마우스를 요소 위에 올렸을 때 선택합니다. */
a:active { } /* 활성화 된(클릭된) 상태일 때 선택합니다. */
a:focus { } /* 포커스가 들어와 있을 때 선택합니다. */


박스를 벗어나는 콘텐츠 처리 

-   박스크기보다 콘텐츠가 더 큰경우에  overflow를 사용할수 있다. Overflow를 사용하면, 넘치는 만
스크롤을 만들어 줄수 있다.   Overflow-x 또는 overflow-y 를 이용해서 세로 가로 스크롤을   
지정할수 있다 


overflow: visible;
overflow:hidden;
overflow-y : scroll;
overflow-x:  scroll;

가로 스크롤 
overflow: auto;
white-space: nowrap;

 박스크기 측정 기준 

박스 크기를 측정하는 두가지 - content-box, box-sizing 

박스는  padding , width , border를 합쳐서 계산하기떄문에 박스에 적용할 여백을 고려해야한다.
해결하기위해서는  box-sizing: border-box;를 사용하여. 여백과 테두리 두께를 포함시켜 박스크기를 
계산하는 방법이 있다. 


절대단위와 상대단위 

절대단위: px, pt
상대단위: %, em, rem, ch, vw, vh

rem과 em차이 

em -  상위요소의 글꼴 크기에 상대적
rem - html 문서의 루트 글꼴 크기에만 상대적

body {
   font-size:14px;
}

div {
   font-size: 2.5rem;
   height: 3rem;
}


위 예제에서 height:3rem의 단위가 rem인 경우와 em인 경우 어떤 차이가 있는지 알아보자.
div의 height가 3rem이라는 것은 div의 높이가 body 폰트 사이즈인 14px의 3배라는 뜻이다. 즉, 14px*3 = 42px
height가 3em인 경우 div의 높이가 div의 폰트 사이즈 2.5rem의 3배라는 뜻이다. 따라서 2.5rem3 = 7.5rem = 14px7.5rem = 105px

'HTML&CSS' 카테고리의 다른 글

CSS FlexBox  (0) 2023.04.14
HTML 기초  (0) 2023.04.12

HTML Tag

 

HEML은  tag들의 집합으로 이루어져 있고,  tag는 "<>"로 묶인 요소이루어진 트리구조의 형태이다. 

Tag들의 종류로는   <head>, <body>, <div>, <span>, <p>, <input>  등이 있다. 

 

 

시멘틱 요소란?

 

시멘틱 태그 - 의미를 부여한 태그

 

HTML의 최신 버전인 HTML5에서는 시맨틱 웹(semantic web)이 중시되면서 여러 시맨틱 요소(semantic element)가 새롭게 만들어졌습니다.

 

시멘틱요소로는 <article>, <aside>, <footer>, <header>, <nav>, <ul>, <main>  등이 있다.

 

시멘틱 요소를 사용해야하는 이유

     1. 검색엔진이 시맨틱 요소를 통해서 키워드를 확인하고 검색결과의 중요한 키워드를 고려하여 찾는다.

     2. 개발자들이 협업을 할때, div요서를 찾는것보다 코드 블록을 찾아서 작업할수 있어 편리하다.

     3. 요소의 테이터유형을 예측하기 쉽다. 

 

 

주요 Tag 특성 

 

 

<div>  -  컨텐츠크기와 상관없이 한줄의 공간을 차지한다

<span>  -  컨텐츠 크기 만큼 공간을 차지한다. 

 

 

Radio Box -   그룹설정이가능 

                       name이라는 속성을 사용하여  grouping 을 해줘야한다. 

Check box - 중복선택가능. 

 

 

 

<label> - 양식 입력 창의 요소를 레이블링을 해준다. 

                  label 태그는 명시적인 방법과 암시적으로 코드를 작성할수있다

 

명시적 explicit 방법

<label for ="age"> 나이 </label>
<input type="number" id="age">

암시적 implicit  방법 

<label>
	나이
    <input type="number" id="age">
</label>

 위에 두 방법중에는 명시적이 방법을 더 선호한다. 

 

label  태그를 사용해야하는 이유 

label태그가 하는 일은 input 태그를 제어하여 상태값을 변경하도록 돕습니다. 이는 input 태그만으로 선택하기 어렵거나 더 좋은 사용자 경험을 제공하기 위한 용도이며 만약 label이 없이 input 태그만 클릭하여 선택하는 경우를 생각해보세요. input 태그 자체는 영역이 작아 클릭하기 어렵거나 서로 다른 위치의 input 태그를 제어하려면 부득히 복잡한 스크립트를 사용해야할 수도 있죠. label 태그는 이런 점으로부터 자유롭고 매우 편리하게 사용할 수 있는 방법입니다.

 

 

 

'HTML&CSS' 카테고리의 다른 글

CSS FlexBox  (0) 2023.04.14
CSS 기초  (0) 2023.04.13

+ Recent posts

티스토리툴바