HTML (24) 썸네일형 리스트형 [etc] 유용한 웹사이트 추천 | 코드펜 codepen 사용법 | 웹 편집기 요즘은 웹 사이트에서도 간단한 코딩이 가능한 페이지 하나를 소개하려고 한다. https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 코드펜이라는 사이트이다. 위의 링크를 타고 가면 페이지가 열린다. 이렇게 첫 페이지가 나타나면 "Start Coding" 버튼을 클릭한다. 이렇게 코딩할 수 있는 창이 나온다. HTML, CSS, JS가 기본으로 잡혀 있으며, 설정을 클릭하면 팝업창이 뜨는데 팝업 왼.. [HTML/CSS] border-radius를 통한 라운딩 처리 생각보다 border는 많이 사용되는데 사용방법에 따라 다양한 표현처리를 할 수 있다. 보통은 버튼이나 input 등에 사용되는 편이며, 여러 가지 형태로 테두리 모양을 변형할 때도 사용되며 유용하게 쓰인다. border-radius는 전체 라운딩을 처리할 때 모서리의 값을 줄 수 있으며, 값이 다를 경우 시계방향 순서대로 값을 주면 된다. 이렇게 위의 그림처럼 각 모서리에 해당되는 곳만 라운딩을 주고싶다면 해당하는 부분에 값을 주면된다. .box { border-top-left-radius: 25px; border-bottom-left-radius : 25px; border-top-right-radius : 25px; border-bottom-right-radius : 25px; } 위의 이미지처럼 크.. [HTML/CSS] 가상 클래스 (pseudo class) 가상 클래스(pseudo class) :link 선택자: :visited 선택자: :hover 선택자: :active 선택자: :focus 선택자: 구조 가상 클래스(특성 위치에 있는 요소를 찾아 스타일 지정) :enabled와 disabled 선택자: Checked 선택자: Root 선택자: :nth-child(n)와 :nth-last-child(n) 선택자: :nth-child(n) : :nth-last-child(n) : 해당 요소들이 모두 부모 요소를 갖고 있어야 한다. 그 외 가상 클래스 :target 선택자: 앵커 목적지에 스타일 적용 :not 선택자: 특성 요소가 아닐 때 스타일 적용(괄호 안에 있는 요소 제외) | p:not(#ex) {color:blue;} 가상요소 | 내용 일부만 선택해.. [HTML/CSS] 연결 선택자 속성 선택자 연결 선택자 하위 선택자(= 자손 선택자 / descendant selector): 자식 선택자(child selector): 인접 형제 선택자(adjacent selector): 형제 선택자(sibling selectop): 속성 선택자 [속성] 선택자: [속성 = 값]: [속성 ~= 값]: [속성 |= 값]: [속성 ^= 값]: [속성 $= 값]: [속성 *= 값]: [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 다음
