머용's 개발일기

레이아웃(Layout) : 구성 요소를 공간에 효과적으로 배열하는 일, 또는 기술 CSS 레이아웃은 웹 요소를 올바른 장소에 배치하는 기술이다. CSS 레이아웃 기술은 형제 요소들을 가지런히 정렬할 수 있게 해주며, 요소가 컨테이너 내부에서 어떤 위치에 놓이게 될지 결정할 수 있다. 대표적인 CSS 레이아웃 기술들 일반적인 문서 흐름 display 속성 플렉스박스 그리드 레이아웃 float 속성 position 속성 기타 등등 플렉스박스(flexbox) : 행 또는 열을 주축으로 설정하여 웹 요소를 배치 및 정렬하는 1차원 레이아웃 방식을 말한다. 플렉스박스 방식에서 요소의 배치와 정렬은 플렉스 컨테이너와 플렉스 아이템 간의 상호작용을 통해 결정된다. 플렉스 컨테이너 : 플렉스박스 방식으로 레이아웃을 결..

변형과 transform 속성 : 웹 요소에는 변형을 적용할 수 있다. 변형이란 요소의 크기나 위치를 바꾸는 것을 뜻하는데, 이때 크기나 위치는 요소의 x축과 y축을 기준으로 바꾼다. 변형을 적용하기 위해서는 CSS의 transform 속성을 사용하는데, 여기에는 css가 지원하는 다양한 변형 관련 함수들을 속성값으로 사용한다. 다양한 변형 함수들 translate(x,y) : 지정한 크기만큼 x축, y축 방향으로 이동한다. scale(x,y) : 지정한 크기만큼 x축, y축으로 확대 및 축소한다. skew(x,y) : 지정한 각도만큼 x축, y축으로 비틀어 왜곡한다. rotate(deg) : 지정한 각도만큼 회전한다. transition 속성 : transform 속성을 이용한 변형은 좌표 평면 상에서..

display : 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의한다. 즉, 요소의 유형을 변경할 수 있다. ex) 블록 레벨 요소인 div 요소를 인라인으로 처리하고 싶다면 div{ display: inline;} ex) 인라인 요소인 a요소를 블록 레벨로 처리하고 싶다면 a{ display: block;} display 속성들 none : 요소를 화면에 표시하지 않는다. block : 요소를 블록 레벨 요소로 만든다. inline : 요소를 인라인 요소로 만든다. inline-block : 요소를 인라인 요소로 표시하되, 블록 레벨의 특성을 추가한다. 즉, 자기가 필요한만큼의 공간만 쓰면서도 width나 height로 공간을 확장할 수 있다. 문서의 흐름 이해하기 : 웹 요소들이 화면에 표시..

CSS(Cascading Stylesheet) : 연속적으로 스타일을 정의하는 문서. 태그와 태그가 중첩되어 연속적인 구조를 지닌 HTML문서에 스타일을 추가한다. CSS3 버전을 주로 사용. - Cascading : 계속되는 , 연속적인 - Style : 멋을 내다 - Sheet: (종이나 문서)한 장 * CSS 문법 : 다수의 '스타일 선언문'으로 구성된다. ex) 선택자{ 속성명: 속성값; } - 선택자 : 어떤 요소에 스타일을 적용할 지에 대한 정보 - 중괄호{} : 선택한 요소에 적용할 스타일을 정의하는 영역 - 속성명 : 어떤 스타일을 정의하고 싶은지에 대한 정보 - 속성값 : 어떻게 정의하고 싶은지에 대한 정보 ex2) p { color: red; } - 해석: p태그에 스타일을 정의한다. ..