본문 바로가기

분류 전체보기

 (80)
flex 스타일 2 flex-wrap: wrap | wrap-reverse; 배치 방법flex 실습을 위한 CSS 스타일 설정.flex-container{ height: 75vh; /* 현재 화면의 75%만큼의 비율 */ /* vh : Viewport Height (현재 화면 높이) Viewport : 브라우저 또는 기기 화면 */ background-color: #eee; display: flex; flex-wrap : wrap;flex-wrap : wrap | wrap-reverse; 배치 방법 (div.item.item${item$}*9)*2 --> item1 item2 item3 item4 item5..
flex 스타일 1 flex 실습을 위한 기본 CSS Style 설정div{ border: 1px solid black; box-sizing: border-box; /* content + padding + border 합으로 width/height 지정 */}.item{ width: 75px; height: 75px;}.item1{ background-color: red; }.item2{ background-color: orangered; }.item3{ background-color: orange; }.item4{ background-color: yellow; }.item5{ background-color: yellowgreen; }.item6{ background-color: green; }...
레이아웃 스타일4 배치 관련 스타일- position은 요소의 위치를 지정하는 속성- position: relative;: 지정된 요소 내부에 다른 요소가 상대적인 위치를 지정할 수 있도록 기준이 되게 만드는 속성: 내부에 작성되는 요소에 위치 지정 시 top, bottom, left, right 속성을 사용할 수 있음- position: absolute;: 기본 요소의 배치 순서를 무시하고 지정된 절대 위치에 요소를 배치함- position: fixed;: 항상 고정된 위치에 요소를 배치함. (화면 움직임에 상관없이 항상 같은 위치) div{ border: 1px solid black; box-sizing: border-box; /* width / height 값이 content + pad..
레이아웃 스타일 3 ▶ 요소 정렬 스타일요소 정렬 스타일1) float : 요소를 띄워서 좌/우로 정렬하는 속성2) clear : float로 인해 띄워져 있는 상태를 해제하는 속성               ( float 사용 시 겹침 문제가 발생하는데 이를 해결할 수 있음)기본 형태 1 2 3 4 Hello World 5 float : left; 1 2 3 4 Hello World 5 6 test 7 float-right 1 2 ..
레이아웃 스타일2 ▶ 요소의 영역(여백) 관련 속성HTML 요소는 총 4가지 영역으로 구성되어 있음content 영역- 요소의 내용이 작성되어지는 영역 : 시작태그와 종료태그 사이에 작성되는 내용padding 영역- content 영역과 border 영역 사이border 영역- 요소의 테두리가 지정되는 영역- content 보다 바깥쪽에서 content를 감싸고 있음margin 영역- 다른 요소와의 간격을 나타내는 영역기준내용border 영역내용content 영역내용padding 영역내용margin 영역내용내용.box{ width: 100px; height: 100px; background-color: lightcoral;}/* content 영역 */.content{ width: 150px; ..
레이아웃 스타일1 ▶ 레이아웃(layout)레이아웃(layout)- 사전적 의미 : 배치, 정리- 기술적 의미 : 구성 요소를 제한된 공간에 효율적으로 배치하는 것을 의미화면 배치 방법(형식) : display 속성- 요소가 화면에 어떻게 보여질지 형식을 지정하는 속성1) block : 화면을 수직 분할(행을 나눔) + width / height 속성 사용 가능2) inline : 화면을 수평 분할(하나의 행에 컬럼을 나눔 == 글자처럼 생각하면 됨) + width / height 속성 사용 불가능3) inline-block : inline의 수평 분할 + block의 크기 조정4) none : 화면에 요소가 표시되지는 않으나 존재하고 있는 상태5) flex : 요소의 정렬되는 방향, 요소간의 간격을 유연하게 처리하는 방..
표 관련 태그 ▶ 표 관련 태그table 태그: 웹 문서에서 자료 정리를 위해 주로 사용하는 태그: 행과 열로 이루어져 있으며, 행과 열이 교차하는 지점을 셀(cell)이라고 함: table 태그는 테이블을 나타내는 행과 열이 작성될 수 있는 영역을 지정함tr 태그: Table Row의 약자로 한 행을 나타내는 태그td 태그: Table Data의 약자로 한 행의 한 컬럼( == 셀)을 나타내는 태그th 태그: Table Header의 약자로 컬럼명을 표시하는 용도의 태그: 기본 성질은 td 태그와 같으나, 추가적으로 굵은 글씨, 가운데 정렬이 이루어짐caption 태그: 테이블의 제목이나 설명 내용을 추가하는 태그 웹 브라우저의 종류 ..
목록 관련 태그 ▶ 목록 관련 태그ul (Unordered List) 태그: 순서가 없는 목록을 작성하는 태그(영역)li (List Item) 태그: 목록에 들어가는 내용을 작성하는 태그 돈가스 햄버거 서브웨이 ol (Ordered List) 태그: 순서가 있는 목록을 작성하는 태그(영역)ol 태그의 type 속성- 기본값 : 1부터 1씩 증가하는 숫자- type = "a" → 영어 소문자 순서- type = "A" → 영어 대문자 순서- type = "i" → 로마숫자 소문자 순서- type = "I" → 로마숫자 대문자 순서+ 추가 속성- start = "5" → 순서가 5부터 시작- reversed → 순서를 반대로 ..

티스토리툴바