css4 CSS- flex 속성 flex속성 -컨테이너 속성 -아이템 속성 css에 flex 컨테이너를 적용 할려면 display: flex; 를 선언해야한다. 컨테이너에 들어있는 아이템 부분들은 가로로 정렬된다. flex-direction 설정 컨테이너에 속하는 아이템들을 어떤방향으로 정렬할 것인지 direction을 알려줘야 한다. flex-direction :row; -> 가로방향 flex-direction: column; ->세로방향 flex-direction: row-reverse; -> 가로 역방향 flex-direction: column-reverse; ->세로 역방향 flex-wrap 설정 컨테이너의 공간에 아이템들이 담을 공간이 없어 줄넘김을 처리할 때 사용한다. flex-wrap: no wrap; ->줄바꿈을 하지 않.. 2022. 1. 26. CSS- root 가상 클래스 root 가상클래스란 ? id,class 선택자로 사용할 수 없는 요소들을 선택하는 선택자다. :root 변수 선언 --(하이픈) 다음뒤에 속성이름을 지정해주고 : 뒤에 속성값을 지정해준다. :root{ --body-background-color: #f5f6f7; --font-color: #4e4e4e; } root 변수 사용 var로 변수를 선언하고 소괄호안에 속성값을 입력한다. :root{ --body-background-color: #f5f6f7; --font-color: #4e4e4e; } body{ background:var(--body-background-color); } 2022. 1. 26. CSS- border, margin, padding 속성 1. border 속성 border 속성은 테두리 두께 (width), 테두리 선 스타일(style), 테두리 선 색(color) 을 지정한다. p { border : 3px solid blue; } margin부분과 paddin부분은 border를 기준으로 나눠진다. 2. margin 속성 margin 속성은 다른태그와의 거리를 나타낸다. 라떼 아메리카노 3. padding 속성 padding 속성은 콘텐츠를 직접 둘러싸고 있는 내부여백이다. 2022. 1. 25. CSS- 셀렉터 셀렉터는 HTML 태그의 모양을 꾸밀 스타일 시트를 선택하는 기능이다. 셀렉터 유형 1. 태그이름 셀렉터 태그이름이 셀렉터로 사용되는 유형 태그이름 셀렉터는 ,로 분리가 된다. h3, li {color : red;} 태그와 태그의 색이 red로 지정되는 것이다. 2. class 셀렉터 셀렉터 이름 앞에 점(.)을 붙이는 경우 html태그의 class속성을 지정할 수 있다. .direct{color :brown;} 안녕하세요 3. id 셀렉터 셀렉터 이름 앞에 #을 붙이는 경우 이 셀렉터는 html태그의 id속성만 지정할 수 있다. #pop up { background : red; } 4. 전체 셀렉터 전체 셀렉터는 * 문자를 사용하여 웹페이지의 모든 html태그에 적용한 스타일을 만든다. 웹페이지의 모든.. 2022. 1. 25. 이전 1 다음
