디발자가 되고싶어 시작한 블로그

공부 출처 : heropy.blog/2018/01/31/sass/ Sass(SCSS) 완전 정복! Style(CSS) 작업 시 필수가 되어버린 CSS Preprocessor(전처리기) Sass(SCSS)에 대해서 이해하고, CSS로 컴파일하는 방법부터 자세한 SCSS 문법까지 살펴봅니다. heropy.blog Sass와 SCSS 의 차이점 Sass: .list width: 100px float: left li color: red background: url("./image.jpg") &:last-child margin-right: -10px SCSS: .list { width: 100px; float: left; li { color: red; background: url("./image.jpg"); &:..

1.1 viewport meta tag viewport란 웹페이지의 가시 영역의미 ex. 모바일 브라우저는 주화면이 세로 화면 => 가장 일반적인 viewport 설정 , 가로폭을 디바이스의 가로폭에 맞추고 초기 화면 배율을 100%으로 설정 1.2 @media @media screen { * { color: red; } } @media print { * { color: blue; } } @media 을 사용하여 미디어 별로 style을 지정하는 것을 'media query' 라고 함 디바이스의 크기나 비율까지 구분 가능 @media screen and (min-width: 480px) { body { background-color: lightgreen; } } [ 작성방법 ] min-width : 30..

보호되어 있는 글입니다.

순서없는 목록 1 2 3 순서있는 목록 1 2 3 ! 몰랐던 점 : type 어트리뷰트를 사용하여 순서를 나타내는 문자 지정 가능 “1” 숫자 (기본값) “A” 대문자 알파벳 “a” 소문자 알파벳 “I” 대문자 로마숫자 “i” 소문자 로마숫자 출처 : poiemaweb.com/html5-tag-list-table HTML5 Tag - List & Table | PoiemaWeb 목록(List)와 표(Table) 형식 표현을 위한 태그 순서없는 목록 (Unordered List) 순서있는 목록 (Ordered List) 중첩 목록 테이블 poiemaweb.com ! 몰랐던 점 : start 어트리뷰트로 리스트 시작값 지정 가능 111 - 5 222 - 6 333 - 7 ! 몰랐던 점 : reversed 어..

2021.03.19 공간을 분할할 수 있는 태그 : div, span, table 등이 있지만, 요즘은 div를 사용하여 레이아웃 구성 but div태그는 의미론적으로 어떠한 의미도 가지고 있지 않기에 HTML5에서 새롭게 추가된 '시맨틱 태그' 를 사용하는게 더 좋은 방법 (IE에선 작동 X) 1. header : 헤더를 의미 2. nav : 내비게이션을 의미(보통 1번 쓴다) 3. aside : 사이드에 위치하는 공간을 의미 4. section : 본문의 여러 내용(article)을 포함하는 공간을 의미 5. article : 본문의 주 내용이 들어가는 공간 6. footer : 푸터를 의미

2021.03.15 지현이가 준 피드백을 기반으로 다시 css를 작성해보았다! 로고 이용안내 전시 교육 소식 유물 박물관 자료실 큐앤에이 멤버스 한국어 메뉴 박물관 새소식 소장유물 1 2 3 4 5 6 7 8 9 10 11 12 header{ display: flex; background-color: aliceblue; justify-content: space-between; margin-bottom: 50px; padding: 20px 0; } header .logo { /* 아이템 스스로도 flex 적용 가능 */ display: flex; justify-content: center; align-items: center; flex-basis: 100px; background-color: aqua; }..

2021.03.15 테이블 연습 한국의 차 뿌리차 인삼차 과일차 수정과 잎차 뽕잎차 당귀차 유자차 감잎차 생강차 구기자차 솔잎차 칡차 대추차 극화차 둥글레차 오미자차 이슬차 마차 매실차 기타 두충차 곡물차 보리차 모과차 영지버섯차 옥수수차 산수유차 귤강차 현미차 탕자차 쌍화차 rowspan / colspan 차이 (**자주 헷갈린다) rowspan은 위아래 병합 / colspan은 좌우병합

이용안내 전시 교육 소식 유물 박물관 자료실 큐앤에이 멤버스 한국어 메뉴 박물관새소식 소장유물 111 222 333 111 222 333 111 222 333 111 222 333 궁금한점 : 모바일은 따로 flex 코드를 작성할까? , 자유롭게 움직이는 마진 패딩 어떻게 정할까?