뚝딱햄 탈출기

HTML, CSS, Javascript : CSS 선택자, CSS 사용법, JS 사용법 본문

web

HTML, CSS, Javascript : CSS 선택자, CSS 사용법, JS 사용법

hyrmzz1 2023. 8. 15. 04:15

HTML은 뼈대, CSS는 꾸미기, JavaScript는 동적 효과 부여.

HTML은 마크업 언어. 셋 중 프로그래밍 언어는 자바스크립트뿐!

HTML

<!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>
    
</body>
</html>

html 파일 생성 후 ! 입력 후 엔터 치면 위 코드 자동으로 작성됨.

크게 head와 body로 구성되어 있음.

head 안에는 페이지의 속성 정보가, body 안에는 페이지의 내용이 들어있음.

HTML의 부모-자식 구조 (tree 구조)

HTML 요소는 "어떤 요소 안에 어떤 요소가 있는지"를 이해하는 것이 가장 중요.

상위에 하위 요소를 감싸고 있는 요소를 부모(parent), 하위에 있는 요소를 자식(children)이라고 함.

부모 태그가 바뀌면, 자식 태그도 모두 영향을 받음.

빨간색 div 안에 초록색, 파란색 div가 들어있음. => 빨간색 div는 부모, 초록색 & 파란색 div는 자식.

빨간색 div를 옮기면 내용물인 초록색, 파란색 div도 함께 이동하고, 빨간색 div의 color를 바꾸면 내용물인 초록색, 파란색 div의 color도 바뀜.  

CSS

HTML 각 태그에 style 속성을 부여해 크기, 정렬, 글꼴, 색 등을 정해 꾸며줄 수 있으나,
CSS를 이용하면 한 곳에서 모아볼 수 있고 여러 요소에 같은 속성을 부여할 수 있으므로 CSS를 사용할 것.

 

HTML의 태그를 꾸미려면 어떤 태그를 꾸밀지 선택해야 함. -> tag / class / id 등으로 태그를 선택.

/* 모든 태그에 적용 */
* {
    속성: 선택지;
}

/* 특정 태그 지칭 */
tag_name {
    속성1: 선택지1;
    속성2: 선택지2;
}

/* 특정 클래스 가진 태그 지칭 -> 해당 클래스 가진 모든 태그에 적용 */
.class_name {
    속성: 선택지;
}

/* 특정 아이디 가진 태그 지칭 (class는 여러 tag에 작성 가능하나 id는 하나의 tag에만 작성) */
#id-name {
    속성: 선택지;
}

/* 특정 클래스를 갖는 특정 태그 지칭 */
tag_name.class_name {
    속성: 선택지;
}

/* 자식 선택자는 > 뒤에 작성 */
/* 'id_name'라는 id를 갖는 요소 바로 안의 <tag_name> 선택 */
#id_name > tag_name {
    속성: 선택지;
}

/* 자손 선택자는 띄어쓰기로 구분. 자식은 바로 아래의 하위 요소, 자손은 모든 하위 요소  */
/* 'class_name'라는 class 갖는 <tag1> 안의 모든 <tag2> 선택 */
tag1.class_name tag2 {
    속성: 선택지;
}

CSS 사용법 (HTML과 연동하는 방법)

HTML 내부에 작성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    /* 여기에 css 작성 */
    </style>
</head>
<body>
    
</body>
</html>

HTML의 <head> tag 내부에 <style></style>을 생성하고, <style> tag 내부에 작성.

별도의 CSS 파일 생성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
</body>
</html>

HTML의 <head> tag 내부에 <link rel = "stylesheet" href = "css 파일명"> 작성.

-> 단축키) link:css 입력 후 엔터

별도의 css 파일엔 <style> tag 없이 바로 선택자 사용하여 코드 작성하면 됨.

Javascript

HTML 상에서 사용할 수 있는 프로그래밍 언어.

모든 브라우저는 기본적으로 Javascript를 알아듣게 설계되어 있고, 모든 웹서버는 HTML+CSS+Javascript를 응답(response) 데이터로 주게 되어있음.

서버와 클라이언트 간의 통신은 html이 아닌 JS를 통해 이루어지기 때문에 JS에서 HTML의 element들을 다룰 수 있어야 함.

-> JS는 HTML의 element를 가져올 수 있고, 변경할 수 있음.

Javascript 사용법 (HTML과 연동하는 방법)

2023.08.07 - [Programming language/JavaScript] - [JavaScript] 자바스크립트 사용(연동) 방법

 

[JavaScript] 자바스크립트 사용(연동) 방법

html 파일에서 태그 맨 아래에 작성. JS는 웹사이트의 콘솔창에서 확인할 수 있다. HTML 파일에서 CSS와 JS 모두를 가져온다. => css 는 에서 link:css 입력해서 가져오기. // 의 단축어 => javascript는 맨 아

hyrmzz1.tistory.com

주석

주석 처리하고 싶은 라인 선택 후 Ctrl + /

정렬 단축키

(윈도우) Shift + Alt + F / (맥) Shift + Option + F / (리눅스) Ctrl + Shift + I

vscode에서 HTML 실행 단축키

Alt + B

저작자표시 비영리 변경금지

'web' 카테고리의 다른 글

Ajax : 개념, 실습  (0) 2023.10.09
부트스트랩 Bootstrap : 개념, 실습  (2) 2023.10.08
[html] 로그인 화면 만들기 : form, input, label, button, submit  (0) 2023.10.08
웹의 동작 개념 : Web API, JSON  (2) 2023.10.05
[HTML][CSS] 구글 웹폰트 적용  (0) 2023.08.15
'web' Related Articles more
Comments