2023.03.16

이미지 파일

src = 거의 대부분 상대경로

href는 절대경로.상대경로 다씀...

---

<!-- 다중입력창 : textarea태그

        여러줄의 텍스트를 입력할때 사용.

        textarea의 사이즈 조정하는 속성

        rows속성 : 입력창의 높이 설정

        cols속성 : 입력창의 너비 설정  -->

    자기소개 : <textarea rows="20" cols="80"></textarea>

<!-- 파일선택 창 만들기 -->

    첨부파일 : <input type="file">*2MB까지 가능

    <br>

    <!-- HTML5에 추가된 폼 양식 -->

    <input type="color"> <!-- 색상선택 -->

    <input type="datetime-local"> <!-- 날짜와 시간 선택 -->

    <input type="date"> <!-- 날짜 선택 -->

    <input type="month"> <!-- 연도와 월 선택 -->

    <input type="number"> <!-- 숫자 선택 -->

    <input type="range"> <!-- 슬라이더 바로 값을 선택 -->

    <input type="time"> <!-- 시간 선택 -->

    <input type="week"> <!-- 연도와 주 선택 -->

 <h1>사용자가 웹사이트로 정보를 보내게 해주는 태그 : form태그</h1>

    <!-- form태그에서 주로 사용하는 속성들

        method속성 : 사용자가 입력한 내용을 서버쪽에 어떻게 넘겨줄지 지정

       주로 사용하는 값 : get - 주소표시줄에 사용자가 입력한 내용이 그대로 드러남.(기본값)

                                     post - 사용자가 입력한 내용이 주소표시줄에 드러나지 않음.

  로그인.회원가입 -> post 값 주로 사용.

 

        action속성 : form태그안의 내용들을 처리해 줄 서버상의 프로그램 지정(주소지정)-->

    <form action="home.html" method="get">

        <!-- form태그안에 자식태그에 할당된 name값을 통해 서버에 데이터를 전달하도록 할수 있다. -->

네트워크상에서 주고받는 데이터 : 파라미터(매개변수)

• 파라미터는 url의 끝부분에 ?뒤에 위치하게된다.
• 파라미터가 여러개일때는 &로 구분이 된다.
• 파라미터는 name값과 실제값(데이터) 의 쌍으로 이루어져있다.

서버상에서 발생하는 응답코드들

• 200 : 네트워크 상태가 성공적으로 이루어졌을때
• 400 : 파일이 없거나 주소가 없는경우(오타일 가능성이 크다.)
• 500 : 서버상에서 발생에러(오타일 가능성이 크다.)

 

첨부파일 : 서버 과부하 피해서 용량 제한함. 보통 게시판글 20~30메가.

<form>

        아이디 : <input type="text" name="userId"><br>

        비밀번호 : <input type="password" name="pwd"><br>

        <input type="submit" value="로그인">

    </form>

name: 서버측에 전달될 때 전달되는 값 지정함

 

 개인정보 제공 동의:<input type="radio" name="agree" value="Y">동의

value를 이용해서 '동의'대신 'Y'라는 값으로 데이터가 넘어감

 

form태그 작성시 name값 누락 없이 만들어야 좋음.

---

CSS의 기본구조

선택자 { css속성:값; }
p { color : blue; }

선택자 : css를 적용할 영역을 선택할 때 사용

* 선택자의 종류 : 태그, id, class 선택자

• 태그 선택자 : 태그이름 그대로 사용
• id 선택자 : 특정태그에 id속성이 부여가 된 상태에서 #id이름값으로 선택
  • ex: #idSelect{ 속성:값; }
    이때, 해당 html에는 id속성이 idSelect 인 태그에 css가 적용된다.
    id 속성은 해당 html페이지에서 똑같은 id값은 중복으로 사용 불가능
    또한, 하나의 태그에는 하나의 id값만 존재(단일 선택)
• class 선택자 : 특정태그에 class속성이 부여가 된 상태에서 .class이름값 으로 선택
  • ex: .classSeclect{ 속성:값; }
    이때, 해당 html에는 class속성이 classSelect인 태그에 css가 적용된다.
    class 속성은 해당 html페이지에서 여러개가 중복으로 사용 가능
    또한, 하나의 태그에는 여러개의 class값이 존재 가능(다중선택)

그 외의 선택자

• 부모 자식 선택자
  • 부모선택자 자식선택자{ 속성:값;}
  • ex: ul li { color : red; }
• 다중 조건 선택자
  • 특정 조건을 만족하는 선택자에 css를 적용
  • and 연산(두가지의 조건이 일치하는경우-공백제거): 태그이름#아이디 {속성1:속성값; 속성2:값;}
    태그이름.클래스명{속성:값;}
    .클래스명#아이디{속성:값;}
  • or 연산(두가지 선택자중 하나라도 만족시 적용-콤마) : 태그이름, #아이디{속성:값;}
    태그이름, .클래스명{속성:값;}
    .클래스명, #아이디{속성:값;}
• 가상 클래스 선택자
  • 선택자 뒤에 :가상이벤트 를 붙이면 특정 이벤트마다 적용할 스타일을 설정할 수 있고, 이를 가상(추상)클래스 라고 한다.
  •  

 선택자 뒤에 :가상이벤트 를 붙이면 특정 이벤트마다 적용할 스타일을 설정할 수 있고,

                        이를 가상(추상)클래스 라고 한다.

                   

                   

                        :link - 방문한적이 없는 링크(a태그 등)

                        :visited - 방문한적이 있는 링크(a태그 등)

                        :hover - 마우스오버 했을때

                        :active - 마우스를 클릭했을때

                        :focus - 포커싱 되었을때 (input 태그 등 )

                        :first-child - 첫번째 자식요소

                        :last-child - 마지막 자식요소

CSS적용 우선순위

1. 속성값 뒤에 !important 를 붙힌 속성
   • 우선순위를 무시하고, 꼭 적용 시키고 싶은 속성이 있다면 속성값 뒤에 !important를 붙여서 적용 시켜주면 된다.
2. HTML태그에 style속성을 직접 지정한 속성(인라인 스타일)
3. #id로 지정한 속성(id선택자)
4. .클래스 , :가상클래스로 지정한 속성
5. 태그 선택자로 지정한 속성
6. 상위 객체에 의해 상속된 속성

css삽입 방법

• 인라인 스타일 : HTML태그에 style속성을 직접 부여하는 방법
• 내부 스타일 시트 : HTML문서에 style태그를 삽입하여 작성
• 외부 스타일 시트 : 별도의 css파일을 만들어 HTML에서 파일을 참조하는 방식
•  

---

<style>

        /* 태그 선택자 */

        p{ color:red; }

        /* id 선택자 */

        #blue{ color : blue; }

        .bold{ font-weight: bold; }

        /* class 선택자 */

        .green{ color : green; }

        .text-size-50{ font-size: 50px; }

        /* 부모 자식 선택자 */

        ul li{ color : violet; }

        /* 다중 조건 선택자 연습 - and연산 */

        div#m_box{ width:220px; height: 150px; border: solid 1px red;}

        div.box{ background-color: blue; }

        /* 다중 조건 선택자 연습 - or연산 */

        span , .box{ background-color: green; }

        /* 가상(추상) 클래스 선택자 연습 */

        a{

            text-decoration: none;

        }

        a:hover{

            color: coral;

            font-weight: bold;

            font-style: italic;

        }

        ul li:first-child{

            font-weight: bold;

            font-size: 24px;

        }

    </style>

    <!-- 외부 스타일 시트 적용하는 방법 -->

    <link rel="stylesheet" type="text/css" href="myCss.css">

 

*외부 스타일시트는 같은 폴더에 'myCss.css'라는 파일을 만들어서

 

#myStyle{

    color: gold;

}

라는걸 적어보았다.  

---

마우스오버:  특정 태그나 글자에 마우스 올리는거 

<div> : 박스 칸 만드는 태그