프론트엔드/CSS
-
플렉스 박스: 'flex-direction'프론트엔드/CSS 2020. 8. 26. 06:05
플렉스 아이템의 정렬 기준 플렉스 컨테이너 안의 각 아이템들은 어떠한 가상의 정렬 기준에 의해 정렬된다. 예를 들어 'display' 속성의 속성값으로 'flex'를 주면 수평축을 메인축으로 요소들이 정렬된다. 그리고 이러한 메인축은 'flex-direction' 속성으로 변경해줄 수 있다. 'flex-direction'의 속성값으로 줄 수 있는 값은 다음과 같다. flex-direction: 속성값; 속성값 설명 row 수평축을 메인축으로 설정. 왼쪽에서 오른쪽으로 아이템 나열. row-reverse 수평축을 메인축으로 설정. 오른쪽에서 왼쪽으로 아이템 나열. column 수직축을 메인축으로 설정. 위에서 아래로 아이템 나열. column-reverse 수직축을 메인축으로 설정. 아래에서 위로 아이템 ..
-
플렉스 박스(Flex box, Flexible box) 기본 개념프론트엔드/CSS 2020. 8. 26. 03:25
플렉스 박스란? 레이아웃 모델로서 서로 다른 크기의 화면과 기기에서도 HTML 요소들이 자동으로 재정렬되고 언제나 레이아웃을 똑같이 유지할 수 있게 만들어준다. 플렉스 박스의 구성 아이템 1 아이템 2 아이템 3 플렉스 박스는 플렉스 컨테이너와 플렉스 아이템으로 구성된다. 플렉스 박스는 플렉스 아이템들을 하나로 묶어주는 역할을 한다. 그리고 박스 안에서 아이템들이 어떻게 배치될지 설정을 해준다. 플렉스 박스 설정하기 아이템 1 아이템 2 아이템 3 아이템 4 아이템 5 HTML 상으로는 여러 아이템을 묶어줄 박스를 만들어주고 그 박스는 플렉스 컨테이너로 활용한다. 그리고 박스 안에 들어간 각 아이템들은 플렉스 아이템으로 이용해준다. 예시에선 우선 아이템으로 활용할 태그를 여러개 만들어줬다. 그후 태그를 ..
-
CSS - visibility, z-index프론트엔드/CSS 2020. 8. 24. 01:54
visibility 1번 박스 2번 박스 3번 박스 visibility는 해당 요소의 공개 여부를 결정하는 속성이다. visibility를 속성으로 부여하고 속성값으로 'hidden'을 주면 해당 요소는 화면에서 숨겨진다. 하지만 눈에는 보이지 않지만 실제로는 공간을 차지한다. 예시에선 visibility가 hidden된 box2가 눈에 보이진 않지만, 위치는 차지하게 된다. z-index 1번 박스 2번 박스 3번 박스 각종 요소를 배치하다보면 해당 요소들이 겹칠 수 있다. 이때 'z-index'값을 설정하면 해당 요소들이 겹쳤을 때 어떤 요소가 앞에 올지 정할 수 있다. 'z-index'값이 높을 수록 해당 요소가 가장 앞으로 나오게 되어있다. 예시에선 3번 박스의 'z-index'값이 가장 크므로 ..
-
CSS - position프론트엔드/CSS 2020. 8. 24. 01:22
position이란? 웹 문서 안의 각종 요소들을 자유자재로 배치해주는 속성이다. position 속성을 이용하면 텍스트, 이미지 등 여러 요소를 원하는 위치에 배치가 가능하다. position의 속성값 각 요소는 position의 속성값 4개 중 한 개를 부여할 수있다. 그리고 해당 요소는 right, left, top, bottom을 이용해서 위치를 이동시킬 수 있다. 속성값 설명 static static은 position 속성의 기본 값. 해당 스타일이 적용된 태그의 위치에 고정. 요소들의 위치를 옮길 수 있는 top, left, right, bottom 등은 사용 불가 relative static 속성과 마찬가지로 해당 스타일이 적용된 태그의 위치에 나타남. 하지만 static과 달리 고정이 아님..
-
CSS - 레이아웃프론트엔드/CSS 2020. 8. 24. 00:21
웹페이지 구성시 CSS를 활용하면 더욱 다양한 레이아웃을 구성할 수 있다. box-sizing 첫번째 박스입니다. 두번째 박스입니다. 세번째 박스입니다. 웹 문서에서 여러 요소 배치시 요소의 너비를 계산해야 한다. 하지만 'width' 속성을 이용할 경우 'content'영역의 너비만 적용된다. 'box-sizing'을 이용하면 'content+padding+border'합쳐서 한 번에 너비를 지정할 수 있다. 속성값을 'content-box'로 주면 콘텐츠 영역만 너비 값으로 사용한다. 속성값을 'border-box'로 주면 콘텐츠 영역+패딩영역+테투리까지 너비 값으로 사용한다. float 속성 박스 입니다. 본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.본문입니다.본문입니다. 본문입니다.본문입..
-
CSS - 박스모델프론트엔드/CSS 2020. 8. 23. 23:17
박스 모델이란? CSS의 박스 모델이란 웹 문서의 내용을 박스 형태로 정의하는 방법을 가리킨다. HTML에서 , 등으로 문서를 작성하게 되면 눈에는 보이지 않지만 태그별로 공간을 점유하게 된다. 문서 내용과 주변 공간을 통틀어 박스라 한다. 태그 별로 문서 부분 이외에 padding과 margine 값을 가지게 된다. 그림처럼 HTML 본문을 'contents'라 하면 해당 문서의 경계인 'border' 사이에 'padding'이 존재한다. 그리고 경계선인 'border' 밖으로 'margin'이 존재한다. 블록 레벨과 인라인 레벨 위 박스 모델을 블록 레벨과 인라인 레벨로 나눠진다. 블록 레벨 블록 레벨의 경우 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소다. 블록 레벨인 태그를 써서 ..
-
CSS - 목록 스타일프론트엔드/CSS 2020. 8. 23. 22:08
HTML 문서 내에 목록을 만들 때 목록 앞에 오는 불릿을 CSS로 바꿔줄 수 있다. 'list-style-type'을 속성으로 주고 다양한 속성값을 줘서 불릿 모양을 바꿀 수 있다. 리스트 { list-style-type: 속성값; } 국어 수학 영어 국어 수학 영어 속성 값을 다양하게 줘서 불릿을 바꿀 수 있다. 속성 값을 다음과 같다. 속성 값 설명 예시 decimal 1로 시작하는 십진수 1, 2, 3, 4, 5 ...... 10, 11 decimal-leading-zero 앞에 0이 붙는 십진수 01, 02, 03, 04, 05 ..... 09, 10, 11 lower-roman 소문자 로마 숫자 ⅰ, ⅱ, ⅲ ... ⅹ upper-roman 대문자 로마 숫자 Ⅰ, Ⅱ, Ⅲ ..... Ⅸ, Ⅹ ..
-