본문 바로가기
728x90
반응형

CSS7

[CSS] 선택자 선택자는 html 파일을 만들고 태그에 스타일을 줄 때 사용한다. 선택자의 종류 전체 선택자 * { margin: auto; } - 모든 태그에 대하여 적용. 하지만 이 방법은 테스트 용도로만 사용하길 권장한다고 함. 태그 선택자 h1 { color: green; } - h1 태그에 대하여 적용. 클래스 선택자 .className { width: 50px; } - .클래스이름 으로 사용. 아이디 선택자 #idName { position: fixed; } - #아이디이름 으로 사용. 복합 선택자 하위선택자 section ul { text-shadow: none; } - 선택자 사이를 공백으로 나타내며 앞 요소의 자손인 뒷 요소를 선택. 자식선택자 section > ul { text-shadow: none;.. 2020. 12. 28.
[프로젝트] 게시글 등록 화면 만들기 - 2 12/27 오전부터 다시 시작한 작업. 어제까지 상태.. 더보기 padding 을 통해서 아직 부족하지만 전보다는 조금은 정리가 됐다. 오후 내내 끙끙거리면서 대충 정리가 됐다. 근데 분실위치 항목에 인풋박스 옆에 있어야할 인근이라는 글자는 왜 밑으로 가있는걸까.... 결국 도움을 받아서 성공했다!! 더보기 수직축 방향 정렬 align-items stretch (기본값) 아이템들이 수직축 방향으로 끝까지 쭈욱 늘어납니다. flex-start 아이템들을 시작점으로 정렬합니다. flex-direction이 row(가로 배치)일 때는 위, column(세로 배치)일 때는 왼쪽이에요. flex-end 아이템들을 끝으로 정렬합니다. flex-direction이 row(가로 배치)일 때는 위, column(세로 배.. 2020. 12. 27.
[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.. 2020. 12. 26.
[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.. 2020. 12. 26.
[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.. 2020. 12. 24.
[CSS] flex사용 배치 연습 Flex란 레이아웃 배치 전용 기능. Flex 레이아웃을 만들기 위한 기본적인 HTML구조 helloflex abc helloflex dispaly: flex; 한줄로 아래와 같이 배치. .container { dispaly: flex; } flex-wrap 줄넘김 처리 연습 연습하다가 만든 트리.. 2020. 12. 24.
크리스마스 카드 만들기 봉투를 열어봐! 2020년 수고 많았어! 친구들에게. 올해 이런저런 일이 많았는데 너희 덕분에 하나도 힘들지 않았어 내년에도 우리 우정 변치말자 연말에 다 같이 못 봐서 아쉽다 2020.12.25 길동이가 실행화면 봉투를 클릭하면 봉투가 열린다 결과링크 xmas.spartacodingclub.kr/v1g3QHFEovYA/xmas.html 2020. 12. 19.
728x90
반응형