'HTML' 태그의 글 목록

HTML

[jQuery] jQuery 기본과 직접선택자

2주녘 2024. 6. 26. 08:51

2024. 6. 26. 08:51

들어가기 전에

💡 라이브러리?

자주 사용되는 함수들의 모임(묶음)을 말합니다.

💡 jquery를 사용하게 된 배경

웹 브라우저(익스플로러, 크롬, 사파리 등…) 간의 js 문법이 잘 동작하지 않았음
- 크로스 브라우저 문제 ⇒ jquery가 등장
바닐라 js 보다 코딩이 짧고 사용이 쉬운 것이 장점
단점으로는 용량이 크고, 성능이 떨어짐

💡 jquery?

함수를 이용해서 DOM을 조작하는 것임

jQuery 기본문법

$(function() {jquery 실행문});

HTML 위쪽에 넣어도 실행되게 만드는 구문 ⇒ HTML 태그 보다 뒤 늦게 실행을 시켜주는 구문

// 사용법

$(function(){
	$('#title').css('color', 'skyblue');
});

전체 선택자

‘*’ 키워드를 사용하며, 전체 태그를 선택함

<!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>
    <h1>제이쿼리</h1>
    <h2>선택자</h2>
    <h3>직접선택자</h3>

    <!-- jquery cdn -->
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        $(function(){
            // * : 전체선택자
            // 전체 태그를 선택해서 외곽선을 1px solid blue 해라.
            // jquery : $("*").css("속성", "값");   // 디자인 조작
            $("*").css("border", "1px solid blue");
        })
    </script>
</body>
</html>

결과

css 선택자

1. 직접선택자

<!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>
    <h1>제이쿼리</h1>
    <h2 id="tit">선택자</h2>
    <h3>직접선택자</h3>

    <!-- jquery cdn -->
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script>

    <script>
        $(function(){
            // jquery 작성
            // 예제 : 배경색: #ff0, border : 2px solid black
            // TODO : 메소드(함수) 체이닝
            // 사용법 : $("CSS선택자").함수().함수() ...
            $("#tit").css("background-color", "#ff0")
                    .css("border", "2px solid black");
        })
    </script>
</body>
</html>

결과

[연습문제]

id = tit 선택해서 / background-color : #ff0 / border : 2px dashed black 설정하기

<!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>
    <!-- 연습문제 1) id = tit 선택해서 -->
    <!-- background-color : #ff0 -->
    <!-- border : 2px dashed black -->
    <h1>제이쿼리</h1>
    <h2 id="tit">선택자</h2>
    <h3>직접선택자</h3>

    <!-- jquery cdn -->
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        $(function(){
            $("#tit").css("background-color", "#ff0")
                    .css("border", "2px dashed black");
        })
    </script>
</body>
</html>

결과

[연습문제 2]

h2 태그를 선택해서 디자인 적용하기

<!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>
    <!-- 연습문제 h2 태그를 선택해서 디자인 적용 -->
    <!-- background-color : skyblue -->
    <!-- border : 2px dashed black -->
    <h1>제이쿼리</h1>
    <h2>선택자</h2>
    <h3>직접선택자</h3>

    <!-- jquery cdn -->
    <script src="http://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        $(function(){
            $("h2")
            .css("background-color", "skyblue")
            .css("border","2px dashed black");
        })
    </script>
</body>
</html>

결과

저작자표시 비영리 변경금지 (새창열림)

'JavaScript > jQuery' 카테고리의 다른 글

[jQuery] 인접 관계 선택자 (0)	2024.06.26
[jQuery] 직접선택자(2) (0)	2024.06.26

[HTML] 서식/목록 태그

2주녘 2023. 8. 13. 10:59

2023. 8. 13. 10:59

주요 서식(Texts) 태그

<h1> ~ <h6> 태그
heading : 제목

<!DOCTYPE html>

<head>

<title>heading tag test</title>

</head>

<body>

<h1>안녕하세요</h1>

<h2>안녕하세요</h2>

<h3>안녕하세요</h3>

<h4>안녕하세요</h4>

<h5>안녕하세요</h5>

<h6>안녕하세요</h6>

</body>

</html>

<p>
paragraph : 문단

<!DOCTYPE html>

<head>

<title>heading tag test</title>

</head>

<body>

<h1>제목 태그 테스트입니다.</h1>

<p>문단 태그 테스트입니다.</p>

</body>

</html>

<br>
break : 줄바꿈

<!DOCTYPE html>

<head>

<title>heading tag test</title>

</head>

<body>

<p>줄바꿈은 <br> br태그를 이용하여 줄바꿈 한다.</p>

</body>

</html>

<hr>
horizontal rule : 가로줄

<!DOCTYPE html>

<head>

<title>heading tag test</title>

</head>

<body>

<p>줄바꿈은 <br> br태그를 이용하여 줄바꿈 한다.</p>

<hr>

</body>

</html>

<pre>
preformatted text : 정의된 형식

<!DOCTYPE html>

<head>

<title>heading tag test</title>

</head>

<body>

<pre>

pre 태그를 테스트하는 중

pre 요소 내 텍스트는

고정폭 글꼴(fixed-width font)을 사용하여 표현

띄어쓰기

줄바꿈이 모두 그대로

나오게 됩니다.

</pre>

</body>

</html>

<div>
division : 그룹(블록)

<!DOCTYPE html>

<head>

<title>heading tag test</title>

</head>

<body>

<br />

</body>

</html>

<span>
그룹, 인라인 특성을 가짐

<!DOCTYPE html>

<head>

<title>heading tag test</title>

</head>

<body>

</body>

</html>

<strong> (b)
strong : 강조, bold : 굵은 글씨

<!DOCTYPE html>

<head>

<title>heading tag test</title>

</head>

<body>

<p>

<strong> ipsum dolor sit, amet </strong> consectetur adipisicing elit. Iste ipsa

asperiores officiis beatae, exercitationem consequatur repellat vel quo

repudiandae culpa a repellendus ducimus fugiat deserunt commodi

necessitatibus nulla consequuntur illum.

</p>

</body>

</html>

<em> (i)
emphasized text : 강조, itallic : 기울임체

<!DOCTYPE html>

<head>

<title>heading tag test</title>

</head>

<body>

<p>

<strong> ipsum dolor sit, amet </strong> consectetur adipisicing elit. Iste ipsa

asperiores officiis beatae, <em> consequatur repellat vel quo</em>

repudiandae culpa a repellendus ducimus fugiat deserunt commodi

necessitatibus nulla consequuntur illum.

</p>

</body>

</html>

<mark>
marked, highlighted : 형광펜

<!DOCTYPE html>

<head>

<title>heading tag test</title>

</head>

<body>

<p>

<strong> ipsum dolor sit, amet </strong> consectetur adipisicing elit. Iste ipsa

asperiores officiis beatae, <em> consequatur repellat vel quo</em>

repudiandae culpa a repellendus ducimus fugiat deserunt commodi

<mark>necessitatibus nulla consequuntur illum.</mark>

</p>

</body>

</html>

<small>
덧 붙이는 글, 저작권, 법률 표기 등...

<!DOCTYPE html>

<head>

<title>heading tag test</title>

</head>

<body>

<p>

<strong> ipsum dolor sit, amet </strong> consectetur adipisicing elit. Iste ipsa

asperiores officiis beatae, <em> consequatur repellat vel quo</em>

repudiandae culpa a repellendus ducimus fugiat deserunt commodi

<mark>necessitatibus nulla consequuntur illum.</mark>

</p>

<hr>

</body>

</html>

<del>
제거된 텍스트, 취소선

<!DOCTYPE html>

<head>

<title>heading tag test</title>

</head>

<body>

<p>

주녘은 개발자가 되기 위해 <strong>자바, HTML,</strong> <del>CSS를</del> 열심히 공부하였습니다.

</p>

</body>

</html>

<ins>
inserted : 밑줄

<!DOCTYPE html>

<head>

<title>heading tag test</title>

</head>

<body>

<p>

주녘은 개발자가 되기 위해 <ins>자바, HTML,</ins> <del>CSS를</del> 열심히 공부하였습니다.

</p>

</body>

</html>

<sub>
subscript : 아래 첨자

<!DOCTYPE html>

<head>

<title>heading tag test</title>

</head>

<body>

<p>

log<sub>2</sub> 2

</p>

</body>

</html>

<sup>
superscript : 윗 첨자

<!DOCTYPE html>

<head>

<title>heading tag test</title>

</head>

<body>

<p>

2<sup>2</sup> = 4

</p>

</body>

</html>

<blockquote>
인용구(블록)

<!DOCTYPE html>

<head>

<title>heading tag test</title>

</head>

<body>

우리나라의 국기.

우리나라에서 국기제정에 대한 논의가 처음 있었던 것은 1876년(고종 13) 1월이었다. 운양호사건을 계기로 한 · 일 사이에 강화도조약 체결이 논의되는 동안, 일본 측은 「운양호에는 엄연히 일본국기가 게양되어 있었는데, 왜 포격했느냐?」면서 트집을 잡았지만, 조선 측에서는 <국기>가 무엇을 뜻하는지 알 수 없었다.

이 일이 계기가 되어 조정에서 비로소 국기제정의 필요성이 활발히 논의되었고, 82년 8월 9일 수신사 박영효 등 일행이 인천에서 일본 배를 타고 도일할 때 당장 게양해야 할 국기가 있어야겠다고 생각한 나머지, 그전에 이미 조정에서 대체적으로 정해진 국기 도안내용을 약간 고쳐 태극사괘의 도안이 그려진 기를 만들었다. 이들 일행은 8월 14일 고베(神戶)에 도착하여 숙소건물 지붕 위에 이 기를 게양했는데, 이것이 태극기의 효시다. 이것을 조정에서 83년 정식으로 국기로 채택, 공포했고, 대한민국이 수립된 후 1949년 문교부에 심의위원회를 설치, 음양과 사괘의 배치안을 결정, 오늘에 이르렀다.

<br><cite>[네이버 지식백과] 태극기 [太極旗] (한국근현대사사전, 2005. 9. 10., 한국사사전편찬회)</cite>

</blockquote>

</body>

</html>

<q>
quotation : 인용구, 인라인 속성
q태그를 쓰면 q태그 안에 텍스트를 큰 따옴표를 표시해줍니다.

<!DOCTYPE html>

<head>

<title>heading tag test</title>

</head>

<body>

<p>주녘에 따르면,

<q>HTML을 마스터하고 싶다고 합니다.</q>

</p>

</body>

</html>

<abbr>
abbreviation/acronym : 줄임말
abbr 태그를 사용하면 마우스 커서를 가져다 놓으면 줄임말의 설명을 보여줍니다.

<!DOCTYPE html>

<head>

<title>heading tag test</title>

</head>

<body>

<p>주녘에 따르면,

<q><abbr title="Hyper Text Markup Language" >HTML</abbr>을 마스터하고 싶다고 합니다.</q>

</p>

</body>

</html>

목록(Lists) 태그

1. 순서가 있는 목록(Ordered Lists)

<ol type=" ">
type에 종류에 따라 순서의 표시가 달라집니다.

유형	설명
type="1"	숫자 목록(기본값)
type="A"	알파벳 대문자
type="a"	알파벳 소문자
type="I"	로마숫자 대문자
type="i"	로마숫자 소문자

<!DOCTYPE html>

<head>

<title>heading tag test</title>

</head>

<body>

<ol>

</ol>

</body>

</html>

2. 순서가 없는 목록(Unordered Lists)

순서가 없는 목록의 스타일에는 4종류가 있습니다.

유형	설명
disc	불릿형(기본값)
circle	작은원형
square	작은 사각형
none	마크 생략

<!DOCTYPE html>

<head>

<title>heading tag test</title>

</head>

<body>

</ul>

</ul>

</ul>

</ul>

</body>

</html>

설명목록(Description Lists)
<dl>
<dt>
<dd>

<!DOCTYPE html>

<head>

<title>heading tag test</title>

</head>

<body>

<dl>

<dd>- 아메리카노 HOT</dd>

<dd>- 아메리카노 ICE</dd>

<dd>- 딸기쉐이크</dd>

<dd>- 초코쉐이크</dd>

</dl>

</body>

</html>

저작자표시 비영리 변경금지 (새창열림)

'HTML > HTML 이론' 카테고리의 다른 글

[HTML] 폼 삽입하기 (0)	2023.08.15
[HTML] 표 만들기 (0)	2023.08.15
[HTML] 태그 요약 (0)	2023.08.03
[HTML] 미디어 삽입 (0)	2023.08.03
[HTML] 표 만들기 (0)	2023.08.03

[CSS] Box 연습문제

2주녘 2023. 8. 8. 14:56

2023. 8. 8. 14:56

1. 다음 예시처럼 css 코드를 작성해보세요

[html]

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<p>

딸기는 25℃ 이하의 <span id="weather">선선한 기후</span>

를 좋아하는 여러해살이 열매 채소로 5월에 열매를 수확합니다. 다른 작물에

비해 잘 기르기 위해서 많은 노력이 필요합니다.

</p>

<ul>

</ul>

</body>

</html>

[css]

#title1 {

color: purple;

}

#title2 {

color: green;

}

#weather {

color: red;

font-weight: bold;

}

#location {

font-weight: bold;

}

#notice {

color: blue;

font-weight: bold;

}

2. 다음 예시처럼 css 코드를 작성해보세요

[html]

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h3>도심 속 생태문화공원 서울대공원</h3>

</body>

</html>

[css]

h3{

/* 외곽선 */

/* border : 선두께 선스타일 선색상 */

border: 5px solid #e1285a;

/* 안쪽 여백 */

padding : 10px;

/* 가로크기 : 고정크기(px) */

width: 400px;

}

3. 다음 예시처럼 css 코드를 작성해보세요

[html]

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h3 id="title1">도심 속 생태문화공원 서울대공원</h3>

<h3 id="title2">도심 속 생태문화공원 서울대공원</h3>

<h3 id="title3">도심 속 생태문화공원 서울대공원</h3>

</body>

</html>

[css]

#title1 {

/* 외곽선(위쪽) */

/* border-top : 선두께 선스타일 색상 */

border-top: 2px solid black;

/* 안쪽 여백 */

padding: 5px;

/* 가로 크기 */

width: 345px;

}

#title2 {

/* 외곽선(왼쪽) */

/* border-left : 선두께 선스타일 색상 */

border-left: 5px solid #e1285a;

/* 안쪽 여백 */

padding: 5px;

}

#title3 {

/* 외곽선 */

/* border : 선두께 선스타일 색상 */

border: 2px solid skyblue;

/* TODO : 둥근 사각형 속성 */

/* TODO : border-radius: 크기; (크기가 클수록 원모양으로 됨) */

border-radius: 3px;

/* 안쪽 여백 */

padding: 5px;

/* 가로 크기 */

width: 345px;

}

4. 다음 예시처럼 css 코드를 작성해보세요

[html]

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<p>

- 웹(Web)은 거미줄을 뜻하는 말로 WWW(World Wide Web)의 약어입니다.<br />

- 인터넷과 웹 브라우저를 통해 사용자에게 정보를 제공하고 서로 소통하게

해줍니다.<br />

- 웹과 관련된 직업에는 웹 기획자, 웹 디자이너, 웹 퍼블리셔, 웹

프로그래머가 있습니다.<br />

</p>

</body>

</html>

[css]

h3{

/* 외곽선 */

/* border : 선두께 선스타일 색깔 */

border: 5px solid blue;

/* 안쪽 여백 */

padding: 20px;

/* 바깥 여백 */

margin: 30px;

}

5. 다음 예시처럼 css 코드를 작성해보세요

[html]

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h3>동물원 속 온실식물원</h3>

<p>

온실식물원은 울창한 숲으로 둘러싸인 청계산 자락에 위치하고

있으며, 총 928종의 다양한 식물이 전시되고 있습니다.

</p>

</body>

</html>

[css]

h3{

/* 왼쪽 외곽선 : border-left : 선두께 선스타일 선색상 */

border-left: 8px solid blue;

/* 안쪽 여백(왼쪽) */

padding-left: 10px;

}

p {

/* 외곽선 */

/* border : 선두께 선스타일 선색깔 */

border: 1px solid black;

/* 가로크기 */

width: 500px;

/* 안쪽여백 */

padding: 20px;

/* 바깥여백(위쪽) */

margin-top: 20px;

}

6. 다음 예시처럼 css 코드를 작성해보세요

[html]

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<ul>

<li>- 프로그램 : 야간동물원 관람, 동물생태 설명회, 식물전시</li>

</ul>

</body>

</html>

[css]

h3{

/* 바깥여백 */

margin-top: 20px;

margin-left: 20px;

}

ul{

/* border : 선두께 선스타일 선색상 */

border: 1px solid black;

/* 안쪽 여백 padding : 상 우 하 좌 */

padding: 20px 30px 30px 30px;

/* 가로 크기 */

width: 450px;

/* 바깥 여백 : margin : 상 우 하 좌 */

margin: 20px 0 0 20px;

}

li{

/* 목록 앞 점 없애기 */

list-style-type: none;

/* 외곽선(점선) */

/* border-bottom: 선두께 선스타일(dotted 점선) 색상 */

border-bottom: 1px dotted gray;

/* 안쪽 여백 축약형 : 상 우 하 좌 */

padding: 10px 0 10px 0;

}

7. 다음 예시처럼 css 코드를 작성해보세요

[html]

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<ul>

</ul>

</body>

</html>

[css]

/* 문제풀이 : 예제(모든 태그에 박스 적용하기) */

body{

/* 사용법 : border: 선두께 선스타일 선색상 */

border: 1px solid red;

}

h3{

border: 1px solid blue;

}

border: 1px solid green;

}

ul{

border: 1px solid red;

}

li{

border: 1px solid blue;

}

8. 다음 예시처럼 css 코드를 작성해보세요

[html]

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<ul>

</ul>

</body>

</html>

[css]

/* 문제 풀이 */

h3{

border-left: 5px solid blue;

margin: 20px;

padding-left: 10px;

}

margin-left: 30px;

margin-bottom: 10px;

}

ul{

border-top: 1px solid gray;

border-bottom: 1px solid gray;

margin-left: 45px;

padding-top: 5px;

padding-bottom: 8px;

}

li{

padding-top: 10px;

margin-left: 20px;

}

9. 다음 예시처럼 css 코드를 작성해보세요

[html]

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<ul>

</ul>

</div>

</body>

</html>

[css]

body{

background-color: yellow;

}

#button{

color: white;

background-color: blue;

width: 120px;

height: 25px;

padding: 8px;

/* 글자중앙정렬 */

/* text-align: center; */

text-align: center;

}

10. 다음 예시처럼 css 코드를 작성해보세요

[html]

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<p>470여 종의 식물과 다람쥐, 산토끼, 족제비,

너구리 및 35종의 새들이 살고 있는

최적의 자연학습장입니다.

</p>

</div>

</body>

</html>

[css]

/* 문제 풀이 */

/* css 디자인 여백 초기화 */

/* 웹브라우저 (크롬, 익스플러러, 파이어폭스 등) 마다 여백이 조금씩 차이남*/

* {

padding: 0;

margin: 0;

}

#banner {

/* 배경색 */

background-color: #f6e9ed;

/* 가로크기 */

width: 320px;

/* 세로크기 */

height: 180px;

/* 외곽선 */

/* border: 선두께 선스타일 선색상 */

border: 1px solid #cccccc;

/* 안쪽 여백 */

padding: 20px;

/* 바깥여백 : 위쪽 */

margin-top: 20px;

/* 바깥여백 : 왼쪽 */

margin-left: 20px;

}

p {

/* 바깥여백 : 위쪽 */

margin-top: 20px;

}

#button {

/* 배경색 */

background-color: #e1285a;

/* 가로크기 */

width: 100px;

/* 둥근 사각형(모서리) */

border-radius: 5px;

/* 글자색 */

color: white;

/* 글자 크기 */

font-size: 12px;

/* 안쪽 여백 */

padding: 5px;

/* 글자 중앙 정렬 */

text-align: center;

/* 바깥여백 - 위쪽 */

margin-top: 30px;

}

저작자표시 비영리 변경금지 (새창열림)

'CSS > CSS 실습' 카테고리의 다른 글

[CSS] display 실습 (0)	2023.08.10
[CSS] 웹 폰트 적용 예제 (0)	2023.08.09
[CSS] 테이블 스타일 적용 (0)	2023.08.09
[CSS] 배경이미지 연습문제 (0)	2023.08.08
[CSS] box 속성 연습문제 (0)	2023.08.07

[HTML] 미디어 삽입

2주녘 2023. 8. 3. 15:54

2023. 8. 3. 15:54

video 삽입

미디어 파일 중 비디오 삽입 태그는 다음과 같습니다.

video(부모태그) > source(자식태그) scr="비디오경로" type="video/확장자"

video 속성 : width(가로크기), countrols(동영상 컨트롤 패널) -->

[실행결과]

audio 삽입

오디오 타입 삽입 태그는 다음과 같습니다.

<audio 속성 src="오디오 파일 경로" >
source src="오디오파일경로" type="audio/확장자

[실행결과]

image 삽입

이미지 타입 삽입 태그는 다음과 같습니다.

[실행결과]

저작자표시 비영리 변경금지 (새창열림)

'HTML > HTML 이론' 카테고리의 다른 글

[HTML] 서식/목록 태그 (1)	2023.08.13
[HTML] 태그 요약 (0)	2023.08.03
[HTML] 표 만들기 (0)	2023.08.03
[HTML] 순서가 있는 목록, 순서가 없는 목록 태그 (0)	2023.08.02
[HTML] 텍스트 폰트 태그 (0)	2023.08.02

[HTML] 기본단축키 및 실습

2주녘 2023. 8. 1. 15:56

2023. 8. 1. 15:56

HTML은 마크업 언어이며, 여는 태그 < > + 닫는 태그 < / > 으로 이루어져 있다.

주석 단축키 : ctrl + /
HTML 템플릿 만들기 : ! + tap키
저장 : ctrl + s
실행취소 : ctrl + z

실행결과 확인

오른쪽 마우스 클릭 -> Open with Live Server 선택

html 앙크 태그

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

html anchor 태그는 링크 태그 즉 페이지 이동 태그입니다.

사용법은 <a href="페이지 주소"> 내용 </a> 으로 사용합니다.

html anchor inner 태그

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<p>안녕하세요 이준혁입니다.</p>

<p>안녕하세요 이준혁입니다.</p>

<p>안녕하세요 이준혁입니다.</p>

</body>

</html>

태그 공통속성 : id(#변수), class를 사용합니다.

저작자표시 비영리 변경금지 (새창열림)

'HTML > HTML 이론' 카테고리의 다른 글

[HTML] 태그 요약 (0)	2023.08.03
[HTML] 미디어 삽입 (0)	2023.08.03
[HTML] 표 만들기 (0)	2023.08.03
[HTML] 순서가 있는 목록, 순서가 없는 목록 태그 (0)	2023.08.02
[HTML] 텍스트 폰트 태그 (0)	2023.08.02

PREV 이전 1 NEXT 다음

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

Just Do "IT"

HTML

[jQuery] jQuery 기본과 직접선택자

들어가기 전에

jQuery 기본문법

전체 선택자

css 선택자

1. 직접선택자

'JavaScript > jQuery' 카테고리의 다른 글

[HTML] 서식/목록 태그

'HTML > HTML 이론' 카테고리의 다른 글

[CSS] Box 연습문제

'CSS > CSS 실습' 카테고리의 다른 글

[HTML] 미디어 삽입

'HTML > HTML 이론' 카테고리의 다른 글

[HTML] 기본단축키 및 실습

'HTML > HTML 이론' 카테고리의 다른 글

+ Recent posts

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역