03. 웹 표준 기술/CSS9 [css] 마무리 ㅁ 초반 10분 ㅁ transition - 이행(움직임 과정) 스타일 속성 1. transition-property : 이행 과정을 볼 css속성을 지정 2. transition-duration : 이행 시간을 지정 (3s == 3초) (3초동안 지속. 3초에 걸쳐서.) 3. transition-timing-function : 이행 과정이 동작하는 방식을 지정 ease, ease-in, ease-out, linear ㅁdiv class="box1">box1div> style> .box1 { box-sizing: border-box; width: 100px; height: 100px; border: 1px solid gray; } .. 2024. 8. 8. [CSS] 04. 레이아웃 스타일 ㅁ 큰 것부터 작은 것순으로 설계한다.ㅁ 반응형을 생각하지 않고 브라우저 화면 제일 큰 화면을 기준으로 생각한다. - 테두리는 레이아웃 다 잡고 지워주면 된다. DOCTYPE html>html lang="ko">head> meta charset="UTF-8"> title>Documenttitle> style> * { /* 모든 요소를 가리킴 */ box-sizing: border-box; border: 1px solid red; } .wrap { width: 100%; /* 상위요소(화면전체)의 100*를 다 사용 */ max-width: 1300px; /* 단, .. 2024. 8. 7. [CSS] 05. Flex 스타일 ㅁ display: flex;- display로 인라인 요소를 블럭 요소로, 블럭 요소를 인라인 요소로, 인라인 요소와 블럭 요소의 특징을 다 가지게 할 수 있었다.- display: flex를 요즘 많이 쓴다. - 부모 컨테이너에 display: flex; 설정시 자식 컨테이너들은 flexible item이 된다. - 컨테이너는 (html)요소들을 의미한다. ㅁ 용어 - CSS에서 부모 요소에 display: flex를 설정하면, 그 부모 요소는 flex 컨테이너가 되고,이 부모 요소의 자식 요소들은 자동으로 flex 아이템이 됩니다. (1) 부모 : flex container- 이 컨테이너는 자식 요소들의 배치와 정렬을 제어하는 역할을 합니다. (2) 자식 : flex item- flexbo.. 2024. 8. 7. [CSS] 04. 레이아웃 스타일 ㅁ DOCTYPE html>html lang="en">head> meta charset="UTF-8"> title>Documenttitle> style> .wrap1 * { background-color: yellow; margin: 10px; width: 100px; height: 100px; } .wrap1 > div { display: block; /* div는 dispaly 기본값이 block */ } style>head>body> div class="wrap1"> div>블럭요소div> span>.. 2024. 8. 6. [CSS] 실습문제 ㅁ 실습문제01_달력만들기 문제 DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Documenttitle> style> /* 하단의 html 요소를 활용하여 style을 적용시켜 사진과 같은 달력모양으로 보여지도록 하시오. 특정 날짜에 마우스를 올리게 되면 해당 날짜의 배경색이 베이지 색상이 되도록 부여하시오. html 요소에 추가적인 속성을 부여하셔도 됩니다. */ style>hea.. 2024. 8. 6. [CSS] 테이블 관련 스타일 ㅁ 에밋 table.table1 table class="table1">table> (tr>td*3)*3 tr> td>td> td>td> td>td> tr> tr> td>td> td>td> td>td> tr> tr> td>td> td>td> td>td> tr> ㅁ 테이블 만들 때 border를 지금도 많이 쓰는데 사실.. 2024. 8. 6. [CSS] 03. 색상 스타일 ㅁ DOCTYPE html>html lang="en">head> meta charset="UTF-8"> title>Documenttitle> style> .box1 { width: 100px; height: 50px; /* 배경색 */ background-color: orange; } style>head>body> div class="box1">div>body>html> - background는 단축 속성. 정확히는 background-color다 세분화하면. 후자로 써라. ㅁ DOCTYPE html>html lang="en">head> meta charset="UTF-8"> .. 2024. 8. 6. [CSS] 02. 텍스트 스타일, 04. 레이아웃 스타일 ㅁ Emmet 문법 몇가지 p#p$*4 p id="p1">p> p id="p2">p> p id="p3">p> p id="p4">p> - p 태그 아이디 값으로 p1, p2, p3, p4 부여한다.이때 시작태그와 종료태그 사이에 들어갈 문구는 중괄호에 쓴다. p#p${글꼴 및 텍스트 Style Test}*4 p id="p1">글꼴 및 텍스트 Style Testp> p id="p2">글꼴 및 텍스트 Style Testp> p id="p3">글꼴 및 텍스트 Style Testp> p id="p4">글꼴 및 텍스트 Style Testp> ㅁ 텍스트 관련 스타일1- 글꼴 : font-family- 크기 : font-size- 굵기 : fon.. 2024. 8. 6. [CSS] 01. 기초선택자 ㅁ - Cascade Style Sheet- HTML 문서상의 요소들에 스타일을 지정하는 언어 ㅁ 참고로 style 태그를 body에 작성해도 상관없지만 head에 작성하는 것이 권장된다. ㅁ CSS 스타일 지정 방식 (1) internal 내부 방식- html 문서 내에 태그를 통해 스타일 구문을 작성하는 방식 (2) external 외부 방식- 별도의 *.css 파일에 스타일 구문을 작성한 후 html 문서에 태그로 가져오는 방식(여러 태그에 스타일 구문을 작성하면 너무 길어짐) (3) inline 인라인 방식- 요소 내에 style 속성을 통해 스타일 구문을 작성하는 방식 ㅁ 기본적인 스타일 작성 구조- 선택자로 요소를 선택. 중괄호 안에 어떤 스타일을 적용할건지. 선택자 { sty.. 2024. 8. 5. 이전 1 다음
