VS Code-html/css

최성현·2023년 7월 13일
@TargetHSpaceSOLIDaalignbordergroovehrefinsetmarqueeol/liul/livspace특수기호
0

HTML

목록 보기
2/6

홈페이지 연결

a태그 href

현재창에서 이동 / 선택한다는 손모양으로 바뀜

<a href="http://www.naver.com"><img src="../html_img/naver.gif"></a><br>

target

target="_blank"/targer="_new"
-> 새창으로 열림

<a href="http://www.nate.com" target="_blank"><img src="../html_img/nate.gif"></a><br><br>
<a href="http://www.google.com" target="_new">Google</a>

border 테두리 줄

hspace 오른쪽으로 옮기기

vspace 아래로 옮기기

<img title="레몬이미지" src="../flower_ani/f16.png"
    border="1" hspace="50" vspace="50"><br>

solid groove inset 차이

<a href="https://cafe.naver.com/javasoo"><img title="파인애플 이미지" src="../flower_ani/f19.png"
    style="border: 10px solid magenta;"></a>

<img title="파인애플 이미지" src="../flower_ani/f19.png"
    style="border: 10px groove magenta; width: 100px; height: 50px;">

<img title="파인애플 이미지" src="../flower_ani/f19.png"
    style="border: 10px inset magenta;">

marquee태그

direction 으로 방향 조정 가능
style background = marquee bgcolor

<marquee direction="right" bgcolor="#ff00ff">우리는 오늘 HTML 공부중입니다</marquee>
<marquee direction="left">우리는 오늘 HTML 공부중입니다</marquee>

이미지 5개 오른쪽으로 이동 이미지 크기 가로세로 150

<marquee direction="right">
        <img src="../Food/11.jpg" style="width: 150px; height: 150px;">
        <img src="../Food/12.jpg" style="width: 150px; height: 150px;">
        <img src="../Food/2.jpg" style="width: 150px; height: 150px;">
        <img src="../Food/6.jpg" style="width: 150px; height: 150px;">
        <img src="../Food/9.jpg" style="width: 150px; height: 150px;">
    </marquee>

align 글자정렬

 <h1 align="center">오늘은 목요일</h1>
 <h1 align="left">오늘은 목요일</h1>
 <h1 align="right">오늘은 목요일</h1>

특수기호

  한칸 띄우기
copyright마크

A &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; b &nbsp;&nbsp; c<br>
&copy;쌍용교육센터<br>

< > 꺽쇠표시

&lt;지금시각은 10시 8분 &gt;

예제

<!-- a태그로 html파일 이동 -->
<a href="../day0712/ex1_htmlTag.html" target="_blank">어제1번예제</a><br>
<a href="../day0712/ex2_htmlTag.html" target="_blank">어제2번예제</a><br>
<a href="../day0712/quiz.html" target="_blank">어제과제물예제</a><br>

원문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html 기본태그</title>
</head>
<body>
    <!-- a태그... 링크 href 현재창에서 이동 / 선택한다는 손모양으로 바뀜 -->
    <a href="http://www.naver.com"><img src="../html_img/naver.gif"></a><br>
    <!-- a태그 href target 새창으로 열림 -->
    <a href="http://www.nate.com" target="_blank"><img src="../html_img/nate.gif"></a><br><br>
    <a href="http://www.google.com" target="_new">Google</a>

    <!-- 이미지 title 이미지 위에 마우스 올리면 뜨는 이름 border 테두리 줄 hspace 오른쪽으로 옮기기 vspace 아래로 옮기기 -->
    <img title="레몬이미지" src="../flower_ani/f16.png"
    border="1" hspace="50" vspace="50"><br>

    <!-- solid groove inset 차이 화면으로 보기 -->
    <a href="https://cafe.naver.com/javasoo"><img title="파인애플 이미지" src="../flower_ani/f19.png"
    style="border: 10px solid magenta;"></a>

    <img title="파인애플 이미지" src="../flower_ani/f19.png"
    style="border: 10px groove magenta; width: 100px; height: 50px;">

    <img title="파인애플 이미지" src="../flower_ani/f19.png"
    style="border: 10px inset magenta;">

    <!-- marquee 안에 쓰여진 것이 <- 방향으로 움직임 direction 으로 방향 조정 가능 -->
    <!-- style background = marquee bgcolor -->
    <marquee direction="right" bgcolor="#ff00ff">우리는 오늘 HTML 공부중입니다</marquee>
    <marquee direction="left">우리는 오늘 HTML 공부중입니다</marquee>
    
    <!-- 이미지 5개 오른쪽으로 이동 이미지 크기 가로세로 150 -->
    <marquee direction="right">
        <img src="../Food/11.jpg" style="width: 150px; height: 150px;">
        <img src="../Food/12.jpg" style="width: 150px; height: 150px;">
        <img src="../Food/2.jpg" style="width: 150px; height: 150px;">
        <img src="../Food/6.jpg" style="width: 150px; height: 150px;">
        <img src="../Food/9.jpg" style="width: 150px; height: 150px;">
    </marquee>

    <!-- 글자크기 -->
    <h1 align="center">오늘은 목요일</h1>
    <h1 align="left">오늘은 목요일</h1>
    <h1 align="right">오늘은 목요일</h1>

    <!-- 특수기호 &nbsp; 한칸 띄우기 &copy; copyright마크-->
    A &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; b &nbsp;&nbsp; c<br>
    &copy;쌍용교육센터<br>
    <!-- <지금시각은 10시 8분>  &lt; &gt; 꺽쇠표시 -->
    &lt;지금시각은 10시 8분 &gt;
    <hr>
    <!-- a태그로 html파일 이동 -->
    <a href="../day0712/ex1_htmlTag.html" target="_blank">어제1번예제</a><br>
    <a href="../day0712/ex2_htmlTag.html" target="_blank">어제2번예제</a><br>
    <a href="../day0712/quiz.html" target="_blank">어제과제물예제</a><br>


</body>
</html>

결과창
http://192.168.0.86:5500/day0713/ex01_htmlTag.html

ol/ul

ol 안에 li는 번호 매김

	<ol>
        <h2>순서있는 리스트(OrderList)</h2>
        <li>자바</li>
        <li>오라클</li>
        <li>Html</li>
        <li>JavaScript</li>
        <li>Ajax</li>
    </ol>

ol 안에 li 타입 매김

	<ol type="A">
        <h2>순서있는 리스트_A(OrderList)</h2>
        <!-- ol 안에 li 타입 매김 -->
        <li>자바</li>
        <li>오라클</li>
        <li>Html</li>
        <li>JavaScript</li>
        <li>Ajax</li>
    </ol>
	<ol type="a">
        <h2>순서있는 리스트_a(OrderList)</h2>
        <li>자바</li>
        <li>오라클</li>
        <li>Html</li>
        <li>JavaScript</li>
        <li>Ajax</li>
    </ol>

ol 안에 li 로마 숫자

	<ol type="I">
        <h2>순서있는 리스트_I_(OrderList)</h2>
        <li>자바</li>
        <li>오라클</li>
        <li>Html</li>
        <li>JavaScript</li>
        <li>Ajax</li>
    </ol>
	<ol type="i">
        <h2>순서있는 리스트_i_(OrderList)</h2>
        <li>자바</li>
        <li>오라클</li>
        <li>Html</li>
        <li>JavaScript</li>
        <li>Ajax</li>
    </ol>

ol 안에 li 지정된 순서 있는 리스트

	<ol start="30">
        <h2>지정된 순서있는 리스트(OrderList)</h2>
        <li>자바</li>
        <li>오라클</li>
        <li>Html</li>
        <li>JavaScript</li>
        <li>Ajax</li>
    </ol>

ul 안에 li 순서없는 리스트(검은점)

	<ul>
        <h2>순서없는 리스트(Unorder List)</h2>
        <li>미국</li>
        <li>영국</li>
        <li>체코</li>
        <li>호주</li>
        <li>일본</li>
        <li>한국</li>
    </ul>

ul 안에 li 순서없는 리스트(하얀점)

	<ul type="circle">
        <h2>순서없는 리스트(Unorder List):circle</h2>
        <li>미국</li>
        <li>영국</li>
        <li>체코</li>
        <li>호주</li>
        <li>일본</li>
        <li>한국</li>
    </ul>

ul 안에 li 순서없는 리스트(사각점)

	<ul type="square"> 
        <h2>순서없는 리스트(Unorder List):square</h2>
        <li>미국</li>
        <li>영국</li>
        <li>체코</li>
        <li>호주</li>
        <li>일본</li>
        <li>한국</li>
    </ul>

ul 안에 li 순서없는 리스트(아무것도없음)

제일 많이 쓰는 방식

	<ul style="list-style: none;"> 
        <h2>순서없는 리스트(Unorder List):none</h2>
        <li>미국</li>
        <li>영국</li>
        <li>체코</li>
        <li>호주</li>
        <li>일본</li>
        <li>한국</li>
    </ul>

원문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol>
        <h2>순서있는 리스트(OrderList)</h2>
        <!-- ol 안에 li는 번호 매김 -->
        <li>자바</li>
        <li>오라클</li>
        <li>Html</li>
        <li>JavaScript</li>
        <li>Ajax</li>
    </ol>


    <ol type="A">
        <h2>순서있는 리스트_A(OrderList)</h2>
        <!-- ol 안에 li 타입 매김 -->
        <li>자바</li>
        <li>오라클</li>
        <li>Html</li>
        <li>JavaScript</li>
        <li>Ajax</li>
    </ol>

    <ol type="a">
        <h2>순서있는 리스트_a(OrderList)</h2>
        <li>자바</li>
        <li>오라클</li>
        <li>Html</li>
        <li>JavaScript</li>
        <li>Ajax</li>
    </ol>

    <ol type="I">
        <h2>순서있는 리스트_I_(OrderList)</h2>
        <li>자바</li>
        <li>오라클</li>
        <li>Html</li>
        <li>JavaScript</li>
        <li>Ajax</li>
    </ol>

    <ol type="i">
        <h2>순서있는 리스트_i_(OrderList)</h2>
        <li>자바</li>
        <li>오라클</li>
        <li>Html</li>
        <li>JavaScript</li>
        <li>Ajax</li>
    </ol>

    <ol start="30">
        <h2>지정된 순서있는 리스트(OrderList)</h2>
        <li>자바</li>
        <li>오라클</li>
        <li>Html</li>
        <li>JavaScript</li>
        <li>Ajax</li>
    </ol>

    <ol start="30" reversed>
        <h2>지정된 순서 거꾸로 리스트(OrderList)</h2>
        <li>자바</li>
        <li>오라클</li>
        <li>Html</li>
        <li>JavaScript</li>
        <li>Ajax</li>
    </ol>



    <!-- 순서 없는 리스트 -->
    <ul>
        <h2>순서없는 리스트(Unorder List)</h2>
        <li>미국</li>
        <li>영국</li>
        <li>체코</li>
        <li>호주</li>
        <li>일본</li>
        <li>한국</li>
    </ul>

    <ul type="circle">
        <h2>순서없는 리스트(Unorder List):circle</h2>
        <li>미국</li>
        <li>영국</li>
        <li>체코</li>
        <li>호주</li>
        <li>일본</li>
        <li>한국</li>
    </ul>

    <ul type="square"> 
        <h2>순서없는 리스트(Unorder List):square</h2>
        <li>미국</li>
        <li>영국</li>
        <li>체코</li>
        <li>호주</li>
        <li>일본</li>
        <li>한국</li>
    </ul>

    <!-- 제일 많이 쓰는 형식 -->
    <ul style="list-style: none;"> 
        <h2>순서없는 리스트(Unorder List):none</h2>
        <li>미국</li>
        <li>영국</li>
        <li>체코</li>
        <li>호주</li>
        <li>일본</li>
        <li>한국</li>
    </ul>
    
</body>
</html>

실행창
http://192.168.0.86:5500/day0713/ex02_olul.html

profile
최성현
백엔드 개발자로서 성장해 나가는 성현이의 블로그~
이전 포스트

VS Code-html

다음 포스트

VS code-html/css 글꼴

0개의 댓글

관련 채용 정보