Study/HTML&CSS (20) 썸네일형 리스트형 [HTML/CSS] CSS 기초 | 스타일 우선순위 | 명시도 내부 스타일 시트: 태그 사이에 태그 안에 작성 외부 스타일 시트: 태그 사이에 태그를 이용해 연결 인라인 스타일: 해당 태그에 style속성 이용(간단한 스타일일 때 사용) 선택자에 따른 css 작성 방식 전체 선택자: * {속성: 속성 값;} 태그 선택자: 태그 {스타일} Id 선택자: #id명 {스타일} 그룹 선택자: 이름1, 이름2 … {스타일} 캐스캐이딩(Cascading) 스타일 우선 순위 사용자 스타일 시트 > 제작자 스타일 시트 중요 스타일 시트 = 뒤에 '!important'를 붙인 스타일 브라우저 스타일 시트: 브라우저 기본 지정 스타일 명시도(Specificity) 인라인 스타일 Id 스타일 클래스 스타일 태그 스타일 Source Order: 중요도와 명시도가 같다면 소스 서 적용, .. [HTML/CSS] 반응형 레이아웃 CSS정리 Viewport(뷰포트) 스마트 폰에서 실제 화면이 표시되는 영역 기본형: 속성: width, height, user-scalable, initial-scale, minimum-scale, maximum-scale 가변 그리드 레이아웃: 전체를 감싸는 요소의 너비를 기준으로 각 요소 너비 계산 | (요소의 너비 / 콘텐츠 전체를 감싸는 요소의 너비)*100 가변 글꼴 Em 단위: 글자크기(em) = 글자 크기(px) | 1em = 16px Rem단위: 처음부터 기본크기를 지정하여 부모 요소의 크기에 따라 자식요소의 글자 크기가 바뀌는 em단위의 단점을 보완함 가변 이미지 | 태그의 srcset속성, , 태그 이용 가변 비디오 | 태그에서 max-width 속성 100%로 지정 미디어 쿼리 기본형: @me.. [HTML/CSS] 네비게이션(navigation) 용어 GNB(Global Navigation Bar) 사이트 전체에 동일하게 적용되는 최상위 전체 공통 네비게이션 메인메뉴, 대분류 메뉴, 전체 사이트에서 공통으로 사용되는 메뉴바 LNB(Local Navigation Bar) GNB 메뉴의 서브 메뉴형식으로 나오는 형태의 네비게이션 서브메뉴, 중분류 메뉴, 각 서브분류 별 사용되는 특정 지역으로 가는 네비게이션 바 SNB(Side Navigation Bar) 일반적으로 왼쪽에 많이 위치해 있다. 서브메뉴를 제외한 나머지 사이드메뉴, 기타 메뉴바 FNB(Foot Navigation Bar) 하단 메뉴, 하단로고, 주소, 카피라이팅 영역 [HTML/CSS] ProgressBar 구현하기 진행바는 진행과정을 직관적으로 확인하기 위해 만든다. 대부분 등록할 때 사용된다. 완성 이미지 HTML code Step01 상품 기본정보 Step02 품목고시 Step03 상품소개 Step04 판매정보 Step02 옵션정보 Step03 추가정보 Step04 재고정보 CSS code .regist_step_ui {overflow: hidden; margin-bottom: 15px;} .regist_step_ui li {position: relative; float: left; width: calc(14% - 21px); margin-right: 28px;} .regist_step_ui li:after {content: ''; display: block; position: absolute; right: -.. 이전 1 2 3 다음
