본문 바로가기

03. 웹 표준 기술43

[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.
07. 폼 관련 태그 ㅁ input >- 사용자에게 값을 입력받을 수 있는 텍스트 상자 또는 체크 박스 등을 만들 수 있다.- 인라인 요소(자동 줄바꿈 안 됨) - 형식   ㅁ type 종류 (많은데 다 외워야 함. 다 자주 쓰임)- 텍스트 관련 : text(기본값), password, search, url, email, tel- 숫자 관련 : number, range- 날짜 관련 : date, month, week, time, datetime-local- 선택 관련 : radio, checkbox- 버튼 관련 : button, submit, reset- 기타 : file, color, hidden   ㅁ 주요 속성- placeholder : 안내 메세지- size : 입력란의 크기- value : 입력란에 표현할 값 / 사.. 2024. 8. 5.
HTML 실습문제 ㅁ 문제 1 - 글자태그, 목록태그 DOCTYPE html>html lang="ko">head>    meta charset="UTF-8">    title>Documenttitle>head>body>    h1>자바(Java) 학습내용h1>    h2>담당 강사 : 강보람h2>    p>이메일 : teacherboram@gmail.comp>    hr>    ul type="disc">         li>프로그래밍 언어            ul type="circle">                li>s>Javas>li>            ul>        li>          li>데이터베이스            ul type="circle">                li>s>Oracle.. 2024. 8. 2.
03. 표 관련 태그 05. 멀티미디어 관련 태그 ㅁ 표 관련 태그- table, thead, tbody, tfoot, tr, td, th- 방대한 자료들을 정리할 때 주로 사용- 행과 열로 구성되어 있고 행과 열이 만나는 지점을 "셀"이라고 표현한다.   ㅁ 태그 종류 (1) - 표를 생성해주는 태그 (2) - 표 내의 한 행을 표현해주는 태그 (3) - 표 내의 제목 셀을 표현해주는 태그 (글자 가운데정렬, 굵게 표현) (4) - 표 내의 일반 셀을 표현해주는 태그   ㅁ 기본 형식             문구        문구                 문구        문구     - 참고로 테두리 두께를 주지 않으면 테두리가 보여지지 않음.- 셀마다 가로길이 세로길이를 지정할 수 있다.크기를 지정하지 않으면 작성한 문구에 맞춰서 가로세로길이가 .. 2024. 8. 2.
1. HTML5 - (1) 웹 통신 기초, HTML 개요, 개발 환경 설정 ㅁ 웹페이지에서 우클릭 - "검사(f12)" or "페이지 소스 보기"하면 소스코드 볼 수 있다. 웹 브라우저로. ㅁ 브라우저마다 속성도 되는 것도 있고 안되는 것도 있음. 크롬으로 통일함.    [웹 통신 기초] ㅁ 인터넷과 웹은 다른 개념이다. ㅁ 인터넷은 전 세계적으로 모든 네트워크가 연결. 연결된 네트워크 망을 인터넷이라 함.인터넷은 웹이 아니다. 엄연히 다른 개념. ㅁ 웹(WEB)은 인터넷이라는 망 위에서 가능한 서비스이다.    ㅁ 외국에선 인터넷 익스플로러(IE) 안 씀. 근데 우리나라는 아직도 조금 씀.전세계적으로는 크롬을 가장 많이 씀.  ㅁ- 사용자가 웹브라우저를 키고 접속하고자 하는 url주소를 써서 보냄(엔터). 이게 구글 서버(측)에 요청을 보내는 것이다.- 구글 서버는 매 페이지.. 2024. 8. 2.

티스토리툴바