TIL(2023.08.24)

JAKE·2023년 8월 24일

CSS TIL html

TIL

목록 보기

30/48

🏃‍♂️What I learned

1. 이미지 관련 태그

img 태그 : 웹 문서에 사진, 그림 같은 이미지를 삽입하는 용도의 태그
1. src : 삽입할 이미지의 경로를 지정하는 속성(파일경로 , 웹주소)
2. width / height : 이미지의 크기를 지정하는 속성
  2-1) 고정크기 : px단위, 화면의 크기와 상관없이 지정된 값의 크기를 갖는 단위
  2-2) 가변크기 : % - 화면이나 영역기준, 사이트 크기에 따라 이미지 크기가 변경(반응형)
3. alt : 이미지를 설명하는 속성 -> 이미지가 출력되지 않는 경우 화면에 직접표시

상대경로 : 현재 위치를 기준으로 경로 지정
.. : 상위
/ : 안쪽
./ : 동일레벨

e.g.)

<img src="./images/cultural heritage/김홍도, 서당.jpg" height="500px">
<img src="./images/cultural heritage/문공유묘 대접.jpg" width="500px">
<img src="./images/cultural heritage/용문 필가.jpg"width="500" height="300">

2. 하이퍼링크 관련 태그

a 태그 : 현재 html문서와 다른 html문서를 연결해서
페이지 이동을 할 수 있게 하는 기능

// 사이트
<a href="https://www.naver.com" target="_self">네이버로 이동</a>

// 이미지
<a href="https://www.naver.com"> <img src="images/animals/랫서.jpg" width="50%"></a>
  
// 한 페이지 내에서도 이동 가능  
<ul id="list">
	목록
	<li><a href="#img1">사진1</a></li>
	<li><a href="#img2">사진2</a></li>
	<li><a href="#img3">사진3</a></li>
</ul>

    <h3 id="img1">사진 1</h3>
    <img src="/images/animals/냐옹이.jpg">
    <a href="#list">목록으로 이동</a>

    <h3 id="img2">사진 2</h3>
    <img src="/images/animals/랫서.jpg">
    <a href="#list">목록으로 이동</a>

    <h3 id="img3">사진 3</h3>
    <img src="/images/animals/늑대냐 개냐.jpg">
    <a href="#list">목록으로 이동</a>

3. 입력 관련 태그

3-1) input 태그

: 웹문서에서 사용자가 입력할 양식을 제공하는 태그

1) text관련 input 태그(type="text")

- 한줄짜리 문자열(텍스트)를 입력할 수 있는 입력상자
- input태그 type의 기본값 == text -> 생략가능
- inline 형식

text 관련 input상자의 공용속성

size : 입력상자 크기

maxlength : 입력 텍스트의 최대길이

placeholder : 입력 상자의 작성될 내용을 설명

value : 모든 input 태그의 type에서 사용 가능한 속성 -> 초기값 지정

url, emil, tel 등을 단독 사용하면 type==text와 같지만 form태그 내부에서는 유효성 검사를 간단 진행

텍스트 : <input> <br>
이메일 : <input type="email" size="30"><br>
전화번호 : <input type="tel" placeholder="-미포함"> <br>
아이디 : <input type="text" size="15" maxlength="10" placeholder="아이디 입력"><br>
비밀번호 : <input type="password" size="15" placeholder="비밀번호 입력"><br>
홈페이지 : <input type="url" value="http://"><br>
검색 : <input type="search" placeholder="검색"><br>

< 결과값 >

텍스트 :
이메일 :
전화번호 :
아이디 :
비밀번호 :
홈페이지 :
검색 :

2) 숫자 관련 input 태그

숫자 관련 input상자의 공용속성

min : 최소값

max : 최대값

step : 증가/감소 단계 지정

숫자 : <input type="number" min="0"> - 숫자만 입력할 수 있는 입력상자, 브라우저에 따라 스핀박스 표시<br>
범위 : <input type="range" step="10"> - 단독사용x -> js와 함께 사용<br>

< 결과값 >

숫자 : - 숫자만 입력할 수 있는 입력상자, 브라우저에 따라 스핀박스 표시
범위 : - 단독사용x -> js와 함께 사용

3) 날짜 관련 input 태그

달력 : <input type="date"><br>
month : <input type="month"><br>
week : <input type="week"><br>
time : <input type="time"><br>
datetime-locel : <input type="datetime-local">

< 결과값 >

달력 :
month :
week :
time :
datetime-locel :

4) 라디오박스, 체크박스

묶음으로 다루려는 input태그들은 반드시 같은 name 속성을 가져야함

-name 속성
1) radio, check박스 뿐만 아니라 input 태그들 중 관련된 것들을 묶어서 부를때 사용
2) 서버쪽에 제출되는 input 태그 값의 이름 지정(form 태그와 같이 사용)

    <label for="a-team">A팀</label><input type="radio" name="team" id="a-team"> 
    <!-- id속성 : 식별자(하나의 html에서 중복금지)-->
    <label for="b-team">B팀</label><input type="radio" name="team" id="b-team">
    <label for="c-team">C팀</label><input type="radio" name="team" id="c-team">
    <!-- for 하면 글씨 눌러도 라디오 태그 선택됨  -->
    
    <label for="baseball">야구</label><input type="checkbox" name="hobby" id="baseball">
    <label for="football">축구</label><input type="checkbox" name="hobby" id="football">
    <label for="basketball">농구</label><input type="checkbox" name="hobby" id="basketball" checked>
    <!-- checked 하면 미리 체크됨 -->

< 결과값 >

A팀
B팀
C팀

야구
축구
농구

5) 기타

제출 :<input type="submit"><br>
버튼 : <input type="button"><br>
초기화 : <input type="reset" value="리셋"><br>

< 결과값 >
제출 :
버튼 :
초기화 :

버튼태그가 등장해서 잘 안씀

색선택 : <input type="color"><br>
파일 : <input type="file"><br>
히든 :<input type="hidden" value="밸류를 화면에 보여주고 싶지 않을때"> -화면상에만 안보임<br>

< 결과값 >
색선택 :
파일 :
히든 : - 화면상에만 안보임

3-2) form 태그

div와 같은 영역(block 형식)

내부에 작성된 input 태그의 값을 서버로 전달하는 역할

[속성]
1) action : 내부에 작성된 값을 전달받을 서버 또는 페이지 주소 작성
2) method : 서버로의 데이터 전달방식을 지정하는 속성(post, get)
3) name : form태그에 이름을 지정하여 form 태그 구분(js 사용)
4) target : action에 지정된 주소를 현재탭/새탭 중 어디서 열지 지정

1) form 예시 1

<form>

    아이디 : <input type="text" name="id"><br>
    비밀번호 : <input type="password" name="pw">
    <!-- 
        input창에 user01, pass01입력했을 때 
        
        '주소?id=user01&pw=pass01' 형태로 서버 제출
        ? : 제출된 값을 나타내는 문자열의 시작부분
        user01, pass01 : 밸류값 -> <input type="text" name="id" value="user01">
     -->
</form>

2) form 예시 2

<form action="07_하이퍼링크관련태그.html">
    <!-- action : 제출할 서버 또는 페이지 주소 -->
    이름 : <input type="text" name="inputName"><br>
    나이 : <input type="number" name="inputAge"><br>

    <button type="submit">제출</button>

</form>

3) form 예시 3

<form action="07_하이퍼링크관련태그.html" target="_blank">

    <label for="aa-team">A팀</label><input type="radio" name="team" id="aa-team" value="A">
    <label for="bb-team">B팀</label><input type="radio" name="team" id="bb-team" value="B">
    <label for="cc-team">C팀</label><input type="radio" name="team" id="cc-team" value="C">

    <br>
    <br>

    <label for="baseball2">야구</label><input type="checkbox" name="hobby" id="baseball2" value="야구">
    <label for="football2">축구</label><input type="checkbox" name="hobby" id="football2" value="축구">
    <label for="basketball2">농구</label><input type="checkbox" name="hobby" id="basketball2" value="농구">

    <br>
    <br>

    <button type="submit">제출</button>

</form>

<!-- 라디오, 체크박스 선택시 전달되는 값이 on으로 나오는 경우
    -> 선택된 input 태그에 아무런 값이 작성되어 있지 않을때 (value 없을떄)
    체크 되었다라고 인식해 'on'으로 표시

    ** input 태그 value속성 추가 **
-->
<hr>
<h3>버튼태그</h3>
type = submit(기본값), reset, menu, button<br><br>
<button> submit버튼 </button> <br><br>
<form>
    <input>
    <button type="reset"> reset버튼 </button> <br>
    : 버튼이 포함된 form태그 내부 input값을 모두 초기화<br><br>
</form>

<button type="button" id="btn">button 버튼</button>
<!-- 아무런 기능이 없음 >> js를 이용해서 원하는 기능을 추가 -->

<script>
    // 자바 스크립트 작성영역
    document.getElementById("btn").addEventListener("click", function () {
        alert("버튼 클릭댐")
    })

</script>

<hr>

4) fieldset / legend

fieldset : 테두리를 만들어 그룹을 구분하는 영역
legend : fieldset 테두리에 이름을 붙이는 것

 <from>
	<fieldset>
	<legend>회원가입</legend>
			아이디 : <input><br>
			비밀번호 : <input type="password">
            <br><br>

	<button>가입하기</button>
	</fieldset>
</from>

< 결과값 >

회원가입 아이디 :
비밀번호 :

가입하기

5) textarea / select / option

textarea 태그 : 여러줄을 입력하기 위한 입력상자

<textarea style="resize: none;" name="" id="" cols="50" rows="10" placeholder="placeholder도 가능"></textarea>

< 결과값 >

6) select태그 / option 태그

<form>
   <select>
      <option value="1">선택 1</option> <!--제출할 때 밸류값 넘어감 , else 옵션 사이값-->
      <option>선택 2</option>
      <option selected>선택 3</option> <!--selected : 기본값으로-->
      <option>선택 4</option>
      <option>선택 5</option>
   </select>
</form>

< 결과값 >

선택 1 선택 2 선택 3 선택 4 선택 5

4. CSS 개요(Cascading Style Sheet)

- 마크업 언어(html)가 실제로 화면에 표시되는 방법을 기술하는 언어(모양, 색상, 크기, 스타일 등)
- html코드가 화면에 어떤 스타일로 보여질지 지정하는 것
- < style > < /style > 사이에서 실행

CSS Selector(선택자)

현재 html 문서 내에서 특정한 요소를 선택하는 문자 또는 문자열
스타일을 적용하고자 하는 요소를 선택하는 방법

1) 태그 선택자

현재 html 문서 내에 같은 태그를 선택하는 선택자
[작성법] 태그명 { css 코드 ;}

e.g.)
div { border: 3px solid red; }
strong { background-color: yellow; }
span { background-color: pink; }

2) id 선택자(#id 속성값)

HTML 문서 내에서 id 속성값이 일치하는 요소를 선택하는 선택자
[작성법] #id속성값 { css 코드; } # == id

e.g.)
#li-1{ background-color: red;}
#li-2{ background-color: orange;}
#li-3{ background-color: yellow;}
#li-4{ background-color: green;}
#li-5{ background-color: blue;}

3) 클래스 선택자(.class속성값)

HTML 문서내에서 같은 class속성값을 가지는 태그를 모두 선택
[작성법] .class 속성값 {css 코드} . == class

e.g.)
 .test-1{color: red;}
 .test-2{color: teal; background-color: bisque;}

.aaa{ font-weight: bold; }

JAKE

이전 포스트

TIL(2023.08.23)

다음 포스트

TIL(2023.08.24)

TIL

🏃‍♂️What I learned

1. 이미지 관련 태그

2. 하이퍼링크 관련 태그

3. 입력 관련 태그

3-1) input 태그

1) text관련 input 태그(type="text")

2) 숫자 관련 input 태그

3) 날짜 관련 input 태그

4) 라디오박스, 체크박스

5) 기타

3-2) form 태그

1) form 예시 1

2) form 예시 2

3) form 예시 3

4) fieldset / legend

5) textarea / select / option

6) select태그 / option 태그

4. CSS 개요(Cascading Style Sheet)

CSS Selector(선택자)

1) 태그 선택자

2) id 선택자(#id 속성값)

3) 클래스 선택자(.class속성값)

TIL(2023.08.23)

TIL(2023.08.25)

0개의 댓글