Front-end/HTML CSS22 layout/design/components 레이아웃의 기본중 기본: display block과 inline의 공통점과 차이점 inline-block과 vertical-align 대부분의 상황을 커버 할 수 있는 레이아웃의 핵심: flex FlexBox의 동작 방식 이해하기 Main Axis와 Cross Axis margin auto 키워드로 정렬하기 justify-content와 align-items FlexBox로 Sidebar, Contents 구조 만들기 자유도 높은 레이아웃 방법: position relative와 absolute absolute, left, right, top, bottom 0 기법 셀렉터의 카테고리를 나누자 공통의 클래스는 별도로 관리하자 체계적인 CSS 작성을 위한 Layout Class 시각적인 덩어리 기준으로 코딩.. 2022. 4. 22. 이미지 스프라이트/inline block 예제 Home About Profile Video Contact Us Jaws Lorem Ipsum is simply dummy text of the printing and typesetting industry. text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. Giants Wave Lorem Ipsum is simply dummy text of thedummy text of thedummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's stand.. 2022. 4. 21. float float의 본질에 대해 이해를 해야한다. float가 보여지는 요소는 마크업이 위에 있어야 한다. img 와 텍스트가 버려지는 공간 없이 구성되는 것을 볼 수 있다. 저것이 float의 목적이다. (float는 무조건! 뒤따라 오는 컨텐츠와 섞인다!) 2022. 4. 17. auto 키워드 알아보기 모든 프로퍼티에는 initial value가 존재한다 . (초깃값) 프로퍼티에따라 auto의 의미가 달라진다. 구현해 볼 것은 아래의 레이아웃. 원하는대로 레이아웃 구성이 되지 않았다. (!) 방법을 찾아보자 1) width의 기준을 바꿔보자. 2022. 4. 16. selector 태그 이름으로 선택을 하는 것은 type seletor 이 것은 정확하지 않기때문에 class 명으로 상세히 셀렉터를 설정해주는 것이 좋다. 셀렉터는 구체적으로 기재되어야 우선순위가 올라서 원하는 곳에 속성을 적절하게 적용 할 수 있다. / 파악이 쉽다. (동일한 셀렉터일 경우 제일 나중의 것의 속성이 적용된다.) html 마크업에서 바로 style을 적용한 것 !important 를 넣어준 것 #id명 을 적어준 것 상세한 셀렉터들.. 잘 구분하여 셀렉터를 설정하고, 속성을 넣어주고, 검사를 통해서 확인을 잘하자. 2022. 4. 15. containing block/initial value/box-sizing/negative margin CSS의 기초 컨셉 알아보기 Cascading Stylesheet Intial value Inheritance CSS Box-modal Margin collapse Negative Margins display css 기초 컨셉 User-agent Stylesheet Casecade inhertiance : 부모 요소에 있는 속성(property) 가 자식요소에 모두 상속되는가? 아니오! Selectors( 선택자) : class, 가상class(Pesudo Class), 가상요소 (Pesudo Element) 0 순위 개념 CSS box-model - margin과 padding 구분하고 적절히 활용하기 - width와 height의 초기값 이해하기(프로퍼티에 물려있는 것) - margin 의 특수성 이.. 2022. 4. 14. position, vw,vh(반응형웹사이즈!), z-index position속성과 함께 position속성 좀 더 알아보기 가상요소와 함께 vw(view width), vh(view height) 단위와 함께 - 반응형 사이즈! z-index와 함께 그라디언트 인라인블럭은(텍스트 양만큼의 크기) marging=0 auto를 쓸 수 없다. 여백은 다음컨텐츠의 소유! 인라인 요소에 position: absolute를 주면 인라인요소가 아닌..그냥 박스가되는것.. 자식요소에 abosulute, 부모요소에 relative 기준 점이 부모요소로 바뀐다. 기본은 뷰포트 기준. **사용 빈도가 굉장히 높음! position : absoulte 에서 기준점을 좌/우/상/하 의 기준점을 주면.. 블럭라인 엘리먼트와 비슷한 특성을 띄게 된다. 사용 가능한 공간이 최대치로 생기는것... 2022. 4. 10. position (transform/position) 레이아웃의 핵심 Position 위치를 조절 할 수 있는 Position속성 position속성의 다양한 옵션 transform속성 알아보기 position속성의 다양한 옵션들 다루어보기 relative absolute relative + absolute의 조합형태 absolute로 가운데 정렬하기 absolute로 확장 레이아웃 구현 https://developer.mozilla.org/ko/docs/Web/CSS/transform transform - CSS: Cascading Style Sheets | MDN CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. developer.mozilla.org transform 은 정중앙이 기준점이며, 다른.. 2022. 4. 8. HTML 시멘틱 태그 머리글, 제목, 헤더. 특정한 콘텐츠의 시작부분을 나타내는 요소 제목과 관련된 부제목을 묶는 태그 사용 안함 네이게이션, 목차, 리스트 등 다른 페이지로의 이동을 위한 링크 공간을 위주로 표현. 주로 a요소와 함께 사용. 좌측과 우측 사이드 위치의 공간을 의미하며, 본문 외에 부수적인 내용을 주로 표현하는 태그. 핵심 콘텐츠와 관련이 있기는 하나, 콘텐츠 전체 흐름과 크게 관련이 없응 콘텐츠. ex)콘텐츠 추천, 광고 등. 독립성이 있음 콘텐츠의 독립성 유무에 따라 section/article 나뉨/ heading(~ )사용을 권장 - 기사, 블로그 등 텍스트 위주의 페이지를 구성할때 주로 사용. (독립적) - 말그데로 주제, 카테고리 별로 섹션을 구분하는 용도의 태그로 주로 사용. 같은 테마를 가진 여.. 2022. 4. 8. 이전 1 2 3 다음
