728x90 반응형 > 프로그래밍 언어/CSS26 [생활코딩] CSS 수업 정리 (8) 멀티 컬럼: 전통적인 레이아웃 기법 column-count=2; 화면이 두개로 분할 text-align: justify; 를 사용 column-count 대신에 column-width 사용 200px 정도 준다. 컬럼의 폭을 200px로 지정한 것 200px 라고 지정한 크기에 맞춰 단을 분할. 브라우저 크기를 조절하면 컬럼의 수를 조정하게 됨. 브라우저 크기를 줄이면 css 는 컬럼 하나 줄이는 걸 통해서, 200px 이상이면서 4개의 컬럼 이하인 상태를 유지하게된다. 만약, 컬럼의 폭을 중시하고 싶으면 count를 사용하지 않고 width만 사용하면 되고, column-count를 중요하게 처리하고 싶으면 width를 사용하지 않으면 됨. 컬럼의 빈 여백(간격) 처리 :.. 2023. 7. 17. [생활코딩] CSS 수업 정리 (7) holy grail layout header section(중간위치) footer section 내부 제일 상단 - nav nav 옆 - main 광고부분 - aside 수평으로 나란히 하려면, 우선 일단 flex를 사용하려면 container에다가 display:flex;를 사용해야 한다. 그럼 이렇게 수평으로 이동을 하게됨 이유: flex에 direction이 row로 디폴트 값으로 되어있기 떄문. column으로 바꿀 시, 헤더, 섹션, 푸터가 수직으로 바뀌게 된다. 아래쪽에만 border 적용 border-bottom: 1px solid 색상; 위쪽 border 적용 border-top: 1px solid gray; section에 있는 항목들.. 2023. 7. 17. [생활코딩] CSS 수업 정리 (6) flex: 주로 레이아웃을 잡을 때 쓰는 기능. 레이아웃: 컨텐츠를 만들 때 컨텐츠를 정리정돈해서 구조화시킬 때 사용하는 것 container 안에 item 다섯개 만들어준다 flex를 사용하기 위해선 자식과 부모가 있어야 한다. item 들이 한 줄 씩 표현되는 이유: 각각의 item들, div 태그는 (div class="item") 화면 전체를 쓴다 라는 특성을 갖고 있기 때문 (= block level element) 출발점은 부모에게 (ex: .container) display 값을 flex로 주는게 시작 flex가 없으면 자식들이 자기의 성격에 따라서 그냥 블록이니까 화면 전체를 씀 (block level element) flex.. 2023. 7. 16. [생활코딩] CSS 수업 정리 (5) 포지션 : 엘리먼트가 화면상의 어디에 위치할 것인지 결정 me 라는 엘리먼트의 이동 left: 오른쪽으로 이동 top: 아래쪽으로 이동 근데 안되는 이유: position을 사용하지 않아서 position:relative; left값과 right값이 동시에 있으면 left 값을 따른다 top값과 bottom값이 동시에 있으면 top 값을 따른다 position:relative; (상대적인 포지션) 이걸 없애버리면 left와 top 등등 offset 값이 적용되지 않는다 css에서 각각의 엘리먼트들은 포지션의 기본값인 (position:static;)을 갖고 있다. static이라고 지정을 하게되면 각각의 엘리먼트는 left,top,bottom,rig.. 2023. 6. 17. [생활코딩] CSS 수업 정리 (4) 마진의 정의 아래 위의 Hello world 가 겹치는 걸 확인할 수 있음 = 마진겹침현상 ㅇ = 전형적인 마진겹침현상 위에 있는 태그와 아래에 있는 태그의 마진 값 중에 더 큰 값이 두 개의 태그 사이의 간격이 된다 마진 겹침현상이 있으면 유리한 경우 부모 엘리먼트와 자식 엘리먼트 모두가 margin 값이 있는 경우 발생할 수 있는 마진겹침현상 알아보기 부모 태그가 시각적으로 아무런 효과도 없는 투명한 상태가 되면 자식 태그와 부모 태그의 마진 값이 합쳐지는 결과를 낳음 child의 위쪽 마진 값이 100이 되는 시점부터 차일드가 움직이게 됨 ( parent의 margin-top 값이 100px ) parent의 margin-top값을 올리면 올리는 그 순간부.. 2023. 6. 15. [생활코딩] CSS 수업 정리 (3) html 태그 색상 적용 따로 색상 주고 싶으면 id를 사용해서 (select) 색상 지정 가능 inherited from html color html로부터 상속된 컬러 border 사용 border: 1px solid red; body태그에 효과를 주었는데 body 안에 있는 h1과 ul에는 border 효과가 똑같이 나타나지 않은 이유: 상속되는게 유리한 것에 따라 동작 font 컬러는 상속되고, 테두리는 상속되지 않았음. 상속하는 속성과 상속하지 않는 속성이 따로 있다. 하나의 태그를 동시에 디자인 하면 웹브라우저 < 사용자 < 저자 순으로 진다 (웹브라우저가 제일 먼저 짐) 캐스케이딩의 규칙 : 하나의 css에 css효과가 중첩됐을 떄 우선순위를 정하는 것 여러 효과.. 2023. 6. 15. [생활코딩] CSS 수업 정리 (2) px: 고정된 폰트의 크기를 지정할 때 em, rem: 사용자가 페이지의 폰트를 가변적으로 변경할 수 있게 할 때 사용 오늘 날에는 rem을 많이 사용 텍스트의 정렬방법 justify: 왼쪽과 오른쪽의 정렬이 공평하게 화면을 차지하게 된다 font-family: 글꼴을 지정하는 방법 font-weight: 글꼴 두께 line-height: 글자의 행과 행 사이의 간격 띄어쓰기가 되어있는 폰트이름은 큰따옴표로 묶어준다. 장식이 있는 폰트 사용하고 싶을 때 뒤에 serif를 붙여서 사용 line-height 기본값: 1.2 그래서 1.2로 주면 아무런 변화 없음 2로 바꾸면 더 .. 2023. 6. 14. [생활코딩] CSS 수업 정리 (1) HTML - 정보 CSS - 디자인 HTML - 정보에 전념 태그: css 문법에 따라 해석해서 동작 style 은 HTML 의 문법 : html의 문법 中 속성 상단의 STYLE 태그도 HTML 문법 CSS가 온다는 것을 HTML의 문법으로 브라우저에게 알려주는 것 color:red 이 부분이 CSS의 문법 class: 어떠한 대상을 관리하기 쉽도록 그룹핑 하는 것 같은 태그 뿐만 아니라 서로 다른 태그도 그룹핑 가능 id: 한명 한명 관리 딱 한 번만 등장 ul 밑에 있는 li 선택 : 띄어쓰기 사용 > : 직계자손에게만 스타일 적용 수도클래스: 각각의 엘리먼트의 상태에 따라서 선택자가 선택되.. 2023. 6. 9. 이전 1 2 3 다음 728x90 반응형
