LOG.info("yun's dev");

표의 칸 하나하나 cell이라고 한다. 박스 영역 , , 박스 영역 x 박스 영역을 가지는 셀은 박스 속성을 지정할 수 있다. border 등등 1. 태그에 적용할 수 있는 속성 -제목 위치 tag {caption-side: top;} /*제목 위치를 위쪽에*/ tag {caption-side: bottom;} /*제목 위치를 아래쪽에*/ -인접한 표 칸의 테두리 간격을 지정 tag { border-spacing :10px;} /*상하좌우*/ tag { border-spacing :10px 25px;} /*좌우 상하*/ -빈 셀 표시 여부 tag {empty-cells:show;} /*빈 셀 보이게*/ tag {empty-cells:hide;} /*빈 셀 안 보이게*/ -이중선 표시하지 않기 table,..

1분코딩 CSS Flex 참고하여 정리 https://studiomeal.com/archives/197 | Flexible Box(Flexbox) 레이아웃 배치 전용 속성 플렉스 속성을 부여한 영역 내의 요소들의 배치를 플렉스 속성을 이용하여 할 수 있음. 1. 기본 구조 Flex Container 부모 요소 Flex 속성을 부여하여 자식 요소들을 Flex 속성에 따라 배치, 정렬할 수 있음 Flex Item 자식 요소 Flex 속성값에 따라 정렬, 배치되는 요소 -기본 구조 예시 2. Flex 속성 -Flex 적용 및 Flex 속성 예시 (1) 속성 : 컨테이너 속성(부모 요소) -Flex 적용 .container { display : flex | inline-flex; } inline-flex는 자식..

한글 문서에서 '그림 배치, 본문과 어울림'과 같은 의미 tag { float : left;} /*다음에 오는 요소의 왼쪽에 위치*/ tag { float : right;} /*이전 요소의 오른쪽에 위치*/ 예시) A B C float를 설정할 경우, 블록 요소, 인라인 요소가 무시됨. 그래서 블록 요소인 태그들이 딸려올라가기도 함. 그것을 방지하기 위해 clear 속성 설정 tag { clear:left; } /*앞서 설정한 float:left를 초기화*/ tag { clear:right; } /*앞서 설정한 float:right를 초기화*/ tag { clear:both; } /* 잘 모르겠으면 both. left, right 모두 초기화*/ 초기화 해주면 이후로는 float의 영향을 받지 않음. (..

1. position 속성 ★★★ -블럭 요소 : 부모 태그 영역의 한 줄 차지. 문서 흐름은 위에서 아래로 쌓임(↓) -인라인 요소 : 컨텐츠 영역만큼 차지. 같은 줄에 순서대로 배치. 왼쪽에서 오른쪽으로(→) tag { position : static(기본값) / relative / absolute / fixed;} 기준 자기 위치 static (정적 위치 설정) 이후에 위치값을 설정해도 위치 이동하지 않음. relative (상대 위치 설정) static일 때 위치 static 위치에서 설정값만큼 이동 static 위치 absolute (절대 위치 설정) 직계 부모 태그 영역 없음 fixed (고정 위치 설정) 현재 브라우저 ex) 페이지 내 고정적으로 위치하는 [ top ] 버튼 같은 것

CSS Box Model 웹 문서에 텍스트, 이미지, 테이블 등의 요소를 배치하기 위해 사용 웹 문서 전체 레이아웃 정의 CSS 속성은 상속받는다. 자손 태그에 스타일이 적용된다. ex) font-family (*박스 모델 관련 속성 : 상속받지 않는다!!) 1. Box 블록 요소 인라인 요소 인라인-블록 요소 영역 부모 태그 영역의 가로 영역 전부(한줄) 컨텐츠 영역 만큼 컨텐츠 영역 만큼 문서 흐름 위에서 아래로 왼쪽에서 오른쪽으로 왼쪽에서 오른쪽으로 크기 설정 가능(width, height) 설정해도 적용 x 가능(width, height) 예시 , , 등등 , 2. 박스 기본 속성 *단위 : px, cm, %(부모 요소의 영역을 기준으로 계산) (1) 크기 - width, height tag { ..

Selector { property : value; } 선택자의 종류, 의미, 사용방법 (*선택자를 통해 스타일 적용하려고) selector{property:value;} 1. 기본 선택자 -전체 선택자 → 화면 전체 배경 purple, 글자색 white, 글꼴 크기 14px -타입 선택자 : 태그, Element(요소) → 태그에 있는 , 태그의 배경색을 각각 skyblue, pink로 지정 -클래스 선택자 TITLE CONTENTS → 클래스명이 a1인 태그 배경색 검정, 글자색 흰색으로 표시됨. -아이디 선택자 → 아이디명이 a1인 태그의 글자색 pinkt, 배경색 black 지정. 태그 중 아이디명이 a2인 것의 글자색 skyblue, 배경색 gray로 지정. -속성 선택자 tag[property..

Cascading Style Sheet 문서의 스타일을 꾸밀 때 사용. 글꼴이나 배경색, 너비와 높이, 위치 등 레이아웃 지정할 수 있음. 문서 내용(Contents)와 표현(Presentation) 분리. HTML : 문서 작성. 웹페이지 구조, 정보. CSS : 문서 디자인. 1. CSS 정의 문법 -선언(declaration) Selector{property:value;} 선택자{속성명:속성값; 속성명2:속성값2;} 2. CSS 사용 위치 -inline style sheet 효율적인 유지보수를 위해 인라인스타일은 최소화 -내부 스타일 -외부 스타일 3. CSS 적용 순위 인라인 스타일 시트 > 내부 스타일 시트 > 외부 스타일 시트 > 웹 브라우저 기본 스타일 시트 -하나의 요소에 인라인 스타일 시..