[CSS] 선택자

선택자는 html 파일을 만들고 태그에 스타일을 줄 때 사용한다. 선택자의 종류 전체 선택자 * { margin: auto; } - 모든 태그에 대하여 적용. 하지만 이 방법은 테스트 용도로만 사용하길 권장한다고 함. 태그 선택자 h1 { color: green; } - h1 태그에 대하여 적용. 클래스 선택자 .className { width: 50px; } - .클래스이름 으로 사용. 아이디 선택자 #idName { position: fixed; } - #아이디이름 으로 사용. 복합 선택자 하위선택자 section ul { text-shadow: none; } - 선택자 사이를 공백으로 나타내며 앞 요소의 자손인 뒷 요소를 선택. 자식선택자 section > ul { text-shadow: none;..

• format_list_bulleted programming/html & css
• · 2020. 12. 28.
• textsms

[프로젝트] 게시글 등록 화면 만들기 - 2

12/27 오전부터 다시 시작한 작업. 어제까지 상태.. 더보기 padding 을 통해서 아직 부족하지만 전보다는 조금은 정리가 됐다. 오후 내내 끙끙거리면서 대충 정리가 됐다. 근데 분실위치 항목에 인풋박스 옆에 있어야할 인근이라는 글자는 왜 밑으로 가있는걸까.... 결국 도움을 받아서 성공했다!! 더보기 수직축 방향 정렬 align-items stretch (기본값) 아이템들이 수직축 방향으로 끝까지 쭈욱 늘어납니다. flex-start 아이템들을 시작점으로 정렬합니다. flex-direction이 row(가로 배치)일 때는 위, column(세로 배치)일 때는 왼쪽이에요. flex-end 아이템들을 끝으로 정렬합니다. flex-direction이 row(가로 배치)일 때는 위, column(세로 배..

• format_list_bulleted Project/IMFIND
• · 2020. 12. 27.
• textsms

[CSS] Flex

1 2 3 div.container 부모요소/flex container/ flex의 영향을 받는 전체 공간. div.item 자식요소/flex item/설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것. flex container에 display: flex를 적용하는게 시작. 아이템들은 기본적으로 위 그림같이 배치가 된다. (가로방향으로) 그리고 자신이 가진 내용물의 width만큼만 차지하게 된다 (inline요소와 비슷) flex-direction (배치 방향 설정)- 아이템들이 배치되는 축의 방향을 결정하는 속성 row; (기본값) 가로 방향으로 배치 column; 역순으로 가로 배치 row-reverse; 세로 방향으로 배치 column-reverse; 역순으로 세로 배치 flex-wr..

• format_list_bulleted programming/html & css
• · 2020. 12. 26.
• textsms

[CSS] grid

grid는 flex보다 더 복잡적인 레이아웃 표현이 가능 -flex는 한방향 레이아웃 -grid는 두방향 레이아웃 grid 레이아웃을 만들기 위한 기본적인 HTML구조 A B C D E F G H I grid 설정하기 .container { display: grid; } 행배치 : grid-template-rows 열배치 : grid-template-columns 예) grid-template-columns: 200px 200px 500px; column을 200px, 200px, 500px로 만들겠다는 의미. grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; ※ fr(fraction)은 숫자 비율대로 트랙의 크기를 나눔. 1..

• format_list_bulleted programming/html & css
• · 2020. 12. 26.
• textsms

[CSS] inline, block, inline-block

display 속성은 HTML요소 (Element)들을 시각적으로 어떤 형식으로 보여줄지 결정하는 속성 dispaly: inline; 텍스트처럼 dispaly: block; 상자처럼 inline 요소들 , , , - 기본적으로 옆으로 쭉 나열 되다가, 공간이 모자라면 다음 줄로 넘어감. block 요소들 , - width, height으로 크기를 설정할수 있고, 옆에 공간이 남아도 다음 줄로 넘어감. inline-block속성은 위 두가지의 특징을 모두 가짐, inline처럼 텍스트 흐름대로 쭉 나열되고, block처럼 박스 형태라 width, height로 크기 설정 가능. .box1 { display: inline-block; width: 300px; } .box2 { display: inline-b..

• format_list_bulleted programming/html & css
• · 2020. 12. 24.
• textsms

[CSS] flex사용 배치 연습

Flex란 레이아웃 배치 전용 기능. Flex 레이아웃을 만들기 위한 기본적인 HTML구조 helloflex abc helloflex dispaly: flex; 한줄로 아래와 같이 배치. .container { dispaly: flex; } flex-wrap 줄넘김 처리 연습 연습하다가 만든 트리..

• format_list_bulleted programming/html & css
• · 2020. 12. 24.
• textsms