20230703 _[21일차]_01. VS code 설치 + HTML

[ vs code단축키 ]
https://kkotkkio.tistory.com/101

[Visual Studio Code] 기본 ~ 유용한 단축키 모음

웹 기반 개발이 메인인 저는 인텔리제이나 웹스톰을 거의 5년이상 사용하다가, 이번년도에 처음 VSCode를 사용해봤습니다. VSCode로 변경한 가장 큰 이유는 인텔리제이는 기능이 점점 많아져서 계

kkotkkio.tistory.com

[ html개요 ]

http://www.tcpschool.com/html/intro

코딩교육 티씨피스쿨

4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등

tcpschool.com

[ html 기본형식 ]

( 주석은 소스코드에서 확인가능 )

( h 태그 ) h1 ~ h6 _ 블록요소(한줄을 다먹음)

엔터나 띄어쓰기 없이 작성해도 브라우저에서는 한줄 점유

( a 태그 ) _ 인라인요소

스페이스바 하나까지만(띄어쓰기) 적용됨, 엔터적용x

( pre 태그)

입력한 코드 그대로 출력

( 스페이스바 적용 ) _ &nbsp (한칸) &emsp (두칸)

( P태그 ) _ 블럭요소

( br태그, i태그, b태그 ) _ 영역태그 (해당영역만)

[ 이미지넣기 ]

src : 파일위치

alt : 소스파일로 열었는데 안나올때 나올 말

width만 지정해줘도 (세로)비율도 자동으로 맞춰짐(scale) => width & height 둘다 지정해주면 스케일 깨짐

* 이미지를 a태그로 감싸고 주소지정 => 이미지 클릭하면 지정주소로 이동

[ 비디오넣기 ]

www.ssyoutube ~~ => 다운로드 페이지로 이동

controls => 재생버튼

autoplay => 페이지 로딩되면 자동재생 (얘는 chrome 7.0부터 막힘)

width / height 지정가능

첫번째 비디오 재생안되면 두번째 video22 로 너머감

<a href="./main.html">다음장으로</a>

main.html로 넘어가는 a태그 생성

<!DOCYTPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>문서 제목입니다.</title>
  </head>

  <body>
    <h1>실제로 화면에 보여지는 내용입니다.</h1>
    <!-- 여기는 주석입니다. shift + alt + a, ctrl + / -->
    <!-- 정렬은 alt + shift + f -->

    <h2>조금 작은 글씨</h2>    <h3> 더 작은 글씨</h3>    
    <h5>인라인요소, 한 줄 점거</h5>
    <h6>가장 작은 글씨</h6>
    <a href = "https://www.naver.com/">네이버</a>
    <pre>
        링크 걸기 = 앵커 태그
        엔터 안먹어요
        스페이스바 한 번만 &emsp; 스페이스바
    </pre>

    <br>
    줄바꿈
    <p>문단을 만들어줍니다. 위 아래 여백이 많이 생겨요</p>
    한줄을 다 먹습니다.

    <hr>
    한줄을 그립니다.

    <i>이텔릭체</i> 기울어집니다.
    <br>
    <b>굵게</b> 굵어집니다.
    <br>
    이미지 연결
    <a href = "https://www.naver.com/">
        <img src="./무민.jpg" alt="무민NO" width="25%">
    </a>

  </body>
</html>

[ 리스트 태그 ]

( ul - li )

리스트 스타일 : disc(기본), circle, square

( ul - li vs ol - li )

( ol - li )

list-style: upper-roman  &  reversed (역순)

[ 테이블 만들기 ]

( 행- tr , 열 - td )

( table _ border 지정 )

( colspan = " " ) _ 열병합

* colspan="2" => (열)2칸차지

* colspan="3" => 3칸차지

( rawspan = " " ) _ 열병합

* rawspan="2" => (행)2칸차지

( colspan & rawspan )

* table도 블록요소

[ div 태그 ] _ 블록요소 (영역구분역할)

(모든 div에 Style한꺼번에 적용)

<!DOCTYPE html>
<html>
  <head>
    <title>리스트 태그 사용하기</title>

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: gray;
        }
    </style>


  </head>
  
  <body>
  
    <div>
        <h1>div입니다.</h1>
    </div>

    <div>
        div입니다
    </div>

  </body>
</html>

(각각의 div에 개별 Style 적용) _ id로 선택자 지정

<!DOCTYPE html>
<html>
  <head>
    <title>리스트 태그 사용하기</title>

    <style>
        #divbox {
            width: 100px;
            height: 100px;
            background-color: gray;
        }
    </style>


  </head>
  
  <body>
  
    <div id="divbox">
        <h1>div입니다.</h1>
    </div>

    <div>
        div입니다
    </div>
    
	<div>
        스타일을 주고 싶지 않아요.
    </div>

  </body>
</html>

(각각의 div에 개별 Style 적용) _ class로 선택자 지정

<!DOCTYPE html>
<html>
  <head>
    <title>리스트 태그 사용하기</title>

    <style>
        #divbox {
            width: 100px;
            height: 100px;
            background-color: gray;
        }
        
	.divbox {
            width: 300px;
            height: 100px;
            background-color: rgb(9, 5, 233);
            color: white;
        }
        
    </style>


  </head>
  
  <body>
  
    <div id="divbox">
        <h1>div입니다.</h1>
    </div>

    <div id="divbox">
        div입니다
    </div>
    
	<div id="divbox">
        div입니다
    </div>
    
	<div class="divbox">
        스타일을 주고 싶지 않아요.
    </div>

  </body>
</html>

* id : 특정한 기능을 수행하는 경우처럼 페이지에 딱 하나 존재할 때 사용. (단일지정)

* class : 여러가지 속성을 동시에 변경할 때 사용.

(위의 경우 여러 div를 동시에 변경하는 상황이니 id가 아닌 class로 지정하는게 맞으나 예시를 위해 id를 사용한 것!!!)

[선택자]

https://ofcourse.kr/css-course/id-class-%EC%84%A0%ED%83%9D%EC%9E%90

CSS id,class 선택자 - ofcourse

개요 태그에서 설정한 id나 class 속성에 따라 스타일을 지정합니다. 참고: HTML 태그의 속성 id 에 줄 경우 아래처럼 #을 맨 앞에 붙여 사용하며, 원칙적으로 하나의 객체에만 적용할 수 있습니다. #

ofcourse.kr

https://choseongho93.tistory.com/60

[CSS] id와 class(아이디와 클래스)의 개념 및 차이점

▶ id와 class(아이디와 클래스)의 개념 및 차이점 ● class : 자주 사용되는 스타일에 적용하는 것이라고 생각하시면됩니다. 예를 들어서 빨강색 or 파란색 등 색상을 미리 지정하고 HTML에 적용시키

choseongho93.tistory.com

( div박스만들기 )

<!DOCTYPE html>
<html>
  <head>
    <title>리스트 태그 사용하기</title>

  </head>
  
  <body>

    <div style="width: 100px; height: 100px; background-color: red;">
        div입니다.
    </div>

    <div style="width: 100px; height: 100px; background-color: blue;">
        div입니다.
    </div>

  </body>
</html>

( div박스만들기 ) _ float: left / float: right (좌우정렬)

<!DOCTYPE html>
<html>
  <head>
    <title>리스트 태그 사용하기</title>

  </head>
  
  <body>

    <div style="float: left; width: 100px; height: 100px; background-color: red;">
        div입니다.
    </div>

    <div style="float: left; width: 100px; height: 100px; background-color: blue;">
        div입니다.
    </div>
    
	<div>
    div밖입니다.
    </div>

<hr>
<br>
    <a href="./semantic.html">시멘틱 태그</a>

  </body>
</html>

'국비과정 > JAVA' 카테고리의 다른 글

20230704 _[22일차]_03. 상단메뉴바 + 게시판만들기 (1)	2023.07.05
20230703 _[21일차]_02. 메뉴만들기 + 시멘틱태그 (0)	2023.07.03
20230630 _[21일차]_03. 로그인 구현2 (html+java)_미완 (0)	2023.07.03
20230630 _[21일차]_01. 메모리 정리 (0)	2023.06.30
20230629 _[20일차]_03. JAVA + HTML + CSS (로그인 구현) (0)	2023.06.29

Will

20230703 _[21일차]_01. VS code 설치 + HTML

'국비과정 > JAVA' 카테고리의 다른 글

티스토리툴바

20230703 _[21일차]_01. VS code 설치 + HTML

'국비과정 > JAVA' 카테고리의 다른 글

'국비과정/JAVA' Related Articles

티스토리툴바