분류 전체보기 (5) 썸네일형 리스트형 5. CSS 응용 1. display : inline-block inline속성과 block속성의 특징을 모두 가짐. inline요소에 margin /padding을 적용하면서 좌측배열로 배치하기위해서 사용함. text1_1 text1_2 text2_1 text2_2 text3_1 text3_2 text4_1 text4_2 2. vertical-align : baseline / sub / super / top / text-top / middle / bottom / text-bottom inline속성들끼리의 수직정렬을 조절하기위한 속성. 아래 예시에서처럼 icon과 text간의 수직정렬을 맞출 수 있다. 타임딜 3. line-height : 행간을 나타내는 속성 * 박스의 height와 line-height를 일치시키면 .. 4. wrap box / 가상선택자 / 특수문자 wrap box 홈페이지 양 옆에 여백을 주기위해 사용하는 box. 너비값은 고정값으로 지정하고 좌우 여백을 auto값으로 지정해주어 고정값외에는 여백처리가 되도록 처리해준다. 시멘틱 태그 내부에 사용 가상선택자 선택자뒤에 가상선택자를 부여하여 특정한 이벤트마다 지정한 속성을 부여한다. selector:first-child() : 해당 요소의 첫번째 요소 selector:last-child() : 해당 요소의 마지막번째 요소 selector:nth-child(n) : 해당 요소의 모든 요소중 n번째 요소 (n번째 자리에 selector요소가 있어야만 적용됨) selector:nth-of-type(n) : 해당 요소의 type중 n번째 요소 (selector요소만 카운트하며 n번째 selector요소에 적.. 3. block 가로배열 / Inline block요소의 여러가지 배열방법 1. float : left / right / none 요소를 화면상에서 띄워 block요소를 가로로 배치시킨다. 다른 요소보다 화면상에서 더 상위 레이어에 존재하게되며 block요소의 특징을 잃어버려 width값이 초기화된다. float을 사용한 요소의 부모는 자식을 인식 못 하고 높이가 0가 되버리는 현상이 생기고 다음 block요소가 그 아래로 끌려 올라와 겹치는 현상이 발생한다. 따라서 float을 사용한 요소의 부모에는 clear속성을 사용하여 float을 해제해줘야한다.!! 사용법 box box box /* CSS */ .clearfix::after{ content:""; clear:both; display:block; } /* 부모요소에 float해제 */ .. 2. Block요소 Block 요소란? 웹 페이지상의 구획을 나누는 목적으로 사용되는 요소. 기본적으로 block요소는 block요소와 inline요소를 포함 할 수 있으며 부모너비의 100%를 가진다는 특징을 가진다. block요소는 block과 inline요소를 포함 할 수 있다. 대부분의 inline요소는 inline요소만 포함 할 수 있다. Block 요소 1. (division) : 어떠한 영역을 구분 할 때 사용되는 태그. 컨텐츠들의 묶음을 구분하기위한 용도. 2. (paragraph) : 단락을 의미함. 일반적으로 div내부에 문단을 표기할 때 사용된다. 3. / (unordered list / list) : 순서없는 목록태그로써, 리스트형식에 사용되며 ul은 하나 이상의 li를 가져야 한다. / (ordere.. 1주차 - 웹기초/html/css 웹 상식 도메인 - Ip주소를 쉽게 문자화한것. - 호스팅 업체를 통해서 일정금액을 지불하고 사용해야함 - 닷홈, 가비아, 카페24, 블루호스트 등등. 디렉터리 - 컴퓨터상의 폴더/파일의 경로 EX) C:\Program Files\Adobe\Adobe Photoshop CC 2019/Photoshop.exe URL(Uniform Resource Locator) - 네트워크 상의 자원이 어디에 있는지 알려주기 위한 규약. 파일식별자라고도 함 EX) https://image7.coupangcdn.com/image/coupang/common/logo_coupang_w350.png 로컬(Local)/리모트(Remote) - 로컬은 클라이언트단을 나타냄 - 리모트는 서버단을 나타냄 웹 서버 - 클라이언트의 웹 브.. 이전 1 다음
