Front-end/HTML CSS22 Flex Box (justify-content와 align-items/flex-grow와 flex-shrink/flex-wrap/flex-direction) flex box (아주 중요합니다) - float과 함께 공부하면 좋습니다. FlexBox 동작 방식 이해하기 Main Axis와 Cross Axis margin auto 키워드 활용 justify-content와 align-items flex-grow와 flex-shrink flex-wrap FlexBox로 레이아웃 잡아보기 FlexBox로 Sidebar, Contents 구조 만들기 FlexBox로 Grid 구조 만들기 FlexBox 추가 내용 Main Axis와 Cross Axis 방향을 바꿈으로서 만들 수 있는 예시들 시작전! 블럭레벨 엘리먼트의 경우, 1) width를 미정으로 지정해주면 부모요소만큼 너비가 정해져서 공간을 가득 쓸 수 있다.(width:auto; 의미) 2) margin:aut.. 2022. 4. 7. 과제 - 수정중 HTML HOME LEMON ORANGE JAMONG CITRUS JAM Fruit dolor sit amet, Orange adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient Jamong nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim .. 2022. 4. 7. inline element 마진 병합현상 마진 병합현상은 블럭레벨 엘리먼츠끼리만(인접해 있는 상하단 마진이 겹침) 일어나는 현상. (브라우저의 의도된 현상). -> 1) 부모 요소에 overflow:hidden 프로퍼티 주기. 2) 부모 요소에 border/padding 프로퍼티 주기. (해결 방법으로 보기에는 약간 어려움) 정보성 이미지/컨텐츠는 html img src로 보통 넣고, 디자인적인 이미지는 css에서 넣는다. css 작성 순서도 중요하다. 순서대로 적지 않아도, 구체적 셀렉터의 속성이 우선적으로 적용이 된다. (selector specificty 로 우선 순위를 확인을 해보자~) 태그에 직접적인 css속성을 주면 우선적으로 무조건 이게 적용 셀렉터 프로퍼티에 !important가 작성 되어있으면 이것이 최우선순위! .. 2022. 4. 6. inline elements의 특성 위의 보이는 클래스 icon은 태그로 작성한 inline contents이다. 1) 인라인 컨텐츠는 가로로 배치된다. 2) baseline(텍스트가 배치 되어있는 라인)을 기준으로 배치된다. 3) width/height 속성의 개념이 없다. (display:inline-block 프로퍼티를 넣어줘야 가로/세로가 생긴다) 4) margin은 좌우만 적용된다. 5) 2022. 4. 4. (box-model) 화면 구현 연습 html My Bucket List Travel all around the world Learn a new language Try a profession in a different field Achieve your ideal weight Run a marathon css body, ul { margin: 0; padding: 0; } li { list-style-type: none; } h1 { margin: 0; font-size: inherit; font-weight: inherit; } .wrapper { width: 800px; margin: 100px auto; } body { font-family: 'arial'; background-color: gray; } .bucketlist { back.. 2022. 4. 2. 박스모 활용(글자간 간격) HTML JANE DOE WEB DESIGNER Information JANE DOE 0000@naver.com Seoul, Korea Skills HTML+CSS JavaScript REACT Footer CSS /*CSS reset ( 우선적으로 해줘야함)*/ h1, h2 p, ul { margin: initial; /*margin=0*/ padding: 0; } li { list-style-type: none; } img { vertical-align: top; } /* */ body { background-color: beige; } .wrapper { background-color: blanchedalmond; width: 800px; margin: 0 auto; } .header { backg.. 2022. 3. 30. CSS 시작순서(css resets) 1. 최소한의 마크업으로 전체적인 레이아웃을 잡는다. 작업을 하는 순서가 중요하다. 전체적인 레이아웃을 먼저 구성하고, 그 뒤에 내용을 넣는다. 가장 바깥의 덩어리 - 내부의 덩어리 - 그 내부의 내부 덩어리 2. 어떻게 공간을 차지하고있는지 , 요소에 background-color을 넣어 확인하며 작업한다. 3. 브라우저 기본 스타일시트가 있다. 이러한 값을 확인하고 css-reset을 활용한다. 어떤 브라우저에서 보든 똑같은 것을 보여주기위함. margin=initial ->마진의 태초의 값. margin =0 font-size:inherit (폰트사이즈는 상속받겠다~라고 리셋함) 브라우저의 버전에 따라 기본값이 다르고 최신 css문법이 적용이 안될 수 있다. 때문에 css value/property.. 2022. 3. 29. box model 활용과제 Diamond What Is Good Diamond? he 4 C’s are namely the ‘Cut’ of a diamond; ‘Color’ or rather the lack of it; ‘Clarity’ of the stone; and the size of the diamond represented in ‘Carat Weight’. The inception of the 4 C’s signifies two crucial aspects: availability of a common language to communicate diverse features of a diamond, and convenience of a standardized guideline for diamond buyers to und.. 2022. 3. 29. Inheritance 상속, Initial Value 초기값Tag, 크롬 "검사" 활용하기 마크업의 구조를 파악할 수 있다 요소의 CSS가 어떻게 구성되어 있는지 파악해 볼 수 있다 브라우저 "검사"를 통한 User-agent Stylesheet 기본 스타일 파악과 초기화 CSS 작성의 효율적인 방법 link태그로 외부 css파일 연결시키기, 어떤 장점이 있는가? 이름표 체계, 클래스셀렉터 알아보기 같은 태그가 여러개이면, 이름표체계가 필요하다 클래스셀렉터 입문과 활용 클래스 올바로 사용하기 다양한 셀렉터들 Selectors Grouping 전체 셀렉터 Universal Selectors 타입 셀렉터 Type Selectors 클래스 셀렉터 Class Selectors 하위 셀렉터 Descendant Selectors 가상클래스 Pseudo Class, :hover HT.. 2022. 3. 28. 이전 1 2 3 다음
