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

프로그래밍이랑 합쳐져서 완성. 애니메이션과 함께! 사용. ex) 드래그블 같은 건가(?) 1. 2차원 변환 함수 tag {transform : translate(50px, 100px);} /*수평 50px, 수직 100px 이동*/ ※ position : relavtive;와 transform : translate( ); 비교 둘다 수평, 수직 이동. 둘의 차이는 기준점. position : relavtive; transform : translate( ); 기준점 static 위치의 왼쪽 모서리 상단(0, 0) 원래 위치의 정가운데 -종류와 설정 translate(수평, 수직) rotate(deg) scale( ) 양수(오른쪽, 아래쪽) 음수(왼쪽, 위쪽) 양수(시계 방향) 음수(반시계 방향) 크기 변환..

유저 경험(UX) : 사용자에게 좋은 경험을 줄수록 사용자들의 이용이 증가. 긍정적 효과. 사용자 인터페이스(UI) : 화면(시각장애인일 경우, 소리) 투명도나 가시성 같은 것들이 디자이너 이슈가 아니냐 생각할 수 있는데 프로그래밍적으로 이용. 마우스오버했을때 이벤트 발생 같은. 1. 투명도(불투명도, opacity) tag {opacity:1.0;} /* 0.0 ~ 1.0사이의 실수값*/ 디자인적 효과를 주려고 사용. 2. 가시성 속성 ★★ CSS 이용하거나 프로그래밍적으로 이용. (1) 가시성 속성 보이지 않게 하더라도 차지한 영역을 유지하고 있음. 안 보이게 출력. tag {visibility:visible;} /* 기본값 */ /*hidden; 숨기기 */ (2) 디스플레이(display) 속성 ..

표의 칸 하나하나 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,..

position이 static이 아닐 때(static이면 위치값 안 먹히니까.) relative, absolute, fixed에서 이용 한 요소 위에 다른 요소를 쌓을 때 사용 z-index 속성값이 클수록 위쪽으로 배치. 속성값에 음수도 가능. BOX_1 BOX_2 BOX_3 순서를 설정하지 않으면 뒤에 나오는 태그가 위쪽으로 배치된다.

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 { ..

★★★ 기존의 여러 선택자를 복합적으로 조합하여 선택 1. 조합 선택자 이해 조합 선택자 이해 ul의 자식이자 div의 자손 1 ul의 자식이자 div의 자손 2 ul의 자식이자 div의 자손 3 -의 자식 : , 의 자손 : , , -의 자식 : -, 는 같은 레벨에 있는 형제 2. 조합 선택자 종류 자손 선택자 선택자A 선택자B 선택자B가 선택자A에 반드시 포함되어 있을 경우에 선택 자식 선택자 선택자A > 선택자B 부모 선택자A의 자식인 선택자B를 선택(직계 자식) 인접 형제 선택자 선택자A + 선택자B 선택자A 바로 다음에 위치한 선택자B를 선택 일반 형제 선택자 선택자A ~ 선택자B 선택자A 뒤에 인접하여 나타나는 모든 선택자B를 선택 그룹 선택자 선택자A, 선택자B 선택자A와 선택자B를 모두 ..

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 적용 순위 인라인 스타일 시트 > 내부 스타일 시트 > 외부 스타일 시트 > 웹 브라우저 기본 스타일 시트 -하나의 요소에 인라인 스타일 시..

하나의 웹 문서 안에 또 다른 웹 문서를 표시할 때, 공간 분할 태그 ex) 실습 예제 링크가 걸린 [ 동물의 숲 ], [ 쿠키런 ], [ 놀러와 마이홈 ]을 클릭하면 링크 걸린 내용이 iframe 태그에 표시되도록 만든 것. 소스 코드 동물의 숲 쿠키런 놀러와 마이홈 *각 동물의 숲, 쿠키런, 놀러와 마이홈에 대해 설명이 적힌 html 문서를 작성. 그 파일들을 각각 태그로 연결했고 iframe에 표시되도록 설정한 것. *HTML5에서 border 속성은 지원하지 않으나 iframe 크기가 보이도록 하기 위해서 지정해두었음.