728x90 반응형 CSS41 [생활코딩] 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. [ HTML + CSS + 자바스크립트] 7.1 ~ 7.3 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 7.1) 플렉스 박스 레이아웃으로 1차원 레이아웃 설계하기 : 1차원 방식으로 효과적인 레이아웃을 설계할 수 있도록 고안된 스타일 속성 - 플렉스 박스 레이아웃 기본 속성 - DOCTYPE html> Document .container { color: rgb(63, 61, 56); background-color: aquamarine; padding: 1rem; display: flex; } .box { background-color: rgb(238, 141, 14); } .box:nth-child(2n) { background-color: blueviolet; } A B C : flex 또는 inl.. 2023. 4. 2. [ HTML + CSS + 자바스크립트] 6.7 ~ 6.9 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 6.7 ) 애니메이션 속성으로 전환 효과 제어하기 DOCTYPE html> 애니메이션 속성으로 전환효과 제어하기 .box { width: 100px; height: 100px; background-color: red; animation-name: beChange; animation-duration: 2s; } @keyframes beChange { 0% { background-color: aqua; } 100% { background-color: beige; } } 애니메이션 속성: 전환효과 속성과 달리 키프레임을 정의해서 실행 : 특정 요소 적용할 키 프레임 이름 지정 .. 2023. 4. 2. [ HTML + CSS + 자바스크립트] 6.5 ~ 6.6 [ 코딩 자율학습 ] HTML+CSS+자바스크립트 6.5) 위치 속성으로 HTML 요소 배치하기 : 좌푯값에 따라 배치할 때 사용 Document body { height: 5000px; } .box { width: 100px; height: 100px; } .red { background-color: red; float: left; } .green { background-color: green; float: left; } .blue { background-color: blue; float: left; } - position 예시들 - - absolute 와 relative 기준점 차이 - absolute: 웹 브라우저의 왼쪽 위 모서리 relative: 요소의 왼쪽 위 모서.. 2023. 4. 2. 이전 1 2 3 4 5 다음 728x90 반응형
