[TIL] 8/21 CSS, Javascript - Inline, internal, external

728x90

CSS

Cascading Style Sheets 의 약자로, HTML 을 꾸며주는 언어
HTML 태그를 하나하나 꾸며줌 (문서를 통채로 한 번에 꾸며주는 것 x)

HTML 에 CSS 를 적용하는 방법은 3가지가 있다.

인라인 (Inline): HTML 태그 안에 같이 작성
내부 스타일 시트 (internal style sheet) : HTML 문서 안에 같이 작성
외부 스타일 시트 (external style sheet) : HTML 문서 밖에 작성하고 연결

1. 인라인 (Inline)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>LOGIN</title>
</head>
<body>
    <h1 style="color: darkred; text-align: center;">Login</h1>
    <form style="text-align: center;">
        ID : <input type="text" style="font-size: 25px;">
        <br>
        PW : <input type="password">
        <br>
        <input type="button" value="login" style="font-size: 25px; width: 100px; height: 40px;">
    </form>
</body>
</html>

인라인 CSS 는 스타일을 적용하고자 하는 태그 안에 style 속성을 적고 적용시킬 CSS 를 나열해주면 된다.

style="적용시킬 css 나열"

한 태그에 여러 개의 CSS 속성을 적용하고 싶다면, style="color: darkred; text-align: center;" 와 같이 각 속성을 세미콜론(;) 으로 구분해 나열해주면 된다.

2. 내부 스타일 시트 (internal style sheet)

장점?

-> 인라인보다 깔끔하고 가독성이 좋다

-> 인라인보다 유지보수 용이

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>LOGIN</title>
    <style>
        h1 {
            color: darkred;
            text-align: center;
        }

        .login_inputs {
            font-size: 25px;
        }
        
        #btn_login {
            font-size: 25px; 
            width: 100px; 
            height: 40px;
        }
    </style>
</head>
<body>
    <h1>Login</h1>
    <form>
        ID : <input class="login_inputs" type="text">
        <br>
        PW : <input class="login_inputs" type="password">
        <br>
        <input id="btn_login" type="button" value="login">
    </form>
</body>
</html>

(1 번과 동일한 기능을 하는 코드인데, CSS 속성을 내부 스타일 시트를 이용해서 적용시킨 것)

내부 스타일 시트는 <head> 태그 안에 <style> 이라는 태그를 만들고 그 안에 적어주면 된다.

동일한 태그 이름을 가진 모든 요소에 동일한 CSS 속성을 적용하고 싶다면 아래와 같이 쓰면 된다.

예를 들어 모든 <h1> 에 color: darkred 를 적용하고 싶다면, h1 { color: darkred; } 이렇게 적어주면 된다.

이렇게 태그 이름을 사용하여 CSS 를 적용하는 방식을 태그 선택자 또는 요소 선택자라고 부른다.

태그이름 {
    ...
}

class 라는 것을 사용해서 CSS 를 적용하는 방식이 있다. 이 방식을 클래스 선택자라고 부른다.

클래스 선택자는 특정 클래스 속성을 가진 모든 요소들에 스타일을 적용할 수 있다. 스타일 시트에 쓸 때는 클래스 이름 앞에 점(.) 을 붙여 정의한다. (중복되는 것을 한방에 해결)

.클래스이름 {
    ...
}

id 라는 것을 사용해서 CSS 를 적용하는 방식이 있다. 이 방식을 아이디 선택자라고 부른다.

아이디 선택자는 특정 id 속성을 가진 요소 하나에 스타일을 적용할 때 사용되며, 문서 내에서 유일한 요소에 적용해야 한다. 스타일 시트에 쓸 때는 아이디 앞에 # 을 붙여 정의한다.

#아이디 {
    ...
}

3. 외부 스타일 시트 (external style sheet)

장점?

-> HTML 과 CSS 파일이 분리되어 작업이 더 편해짐

<!-- login.html -->

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>LOGIN</title>
        <link rel="stylesheet" href="login.css">
    </head>
    <body>
        <h1>Login</h1>
        <form>
            ID : <input class="login_inputs" type="text">
            <br>
            PW : <input class="login_inputs" type="password">
            <br>
            <input id="btn_login" type="button" value="login">
        </form>
    </body>
</html>

/* login.css */

h1 {
    color: darkred;
    text-align: center;
}

.login_inputs {
    font-size: 25px;
}

#btn_login {
    font-size: 25px; 
    width: 100px; 
    height: 40px;
}

HTML 파일과 CSS 파일을 분리해서 만들고,

HTML 파일의 <head> 태그 안에 <link> 태그로 CSS 파일과 연결 시켜주면 CSS 속성이 적용된다.

<link rel="stylesheet" href="파일이름">

추가 - 주석달기

- html 파일에 주석달기

<!-- 주석이다 -->

- css 파일에 주석달기

/* 주석이다 */

Javascript

자바스크립트는 특정 HTML 요소를 선택해서 제어할 수 있는 스크립트 언어, 최근에는 백엔드 언어로도 각광받고 있는 중이라고 한다.

스크립트 언어가 뭐지?

-> 요소 하나하나의 역할과 기능을 제시/제어해주는 언어, 프로그래밍 언어 x

-> 영화/드라마 대본을 스크립트라고 하는데, 자바스크립트도 각 HTML element 에게 이렇게 행동을 하라는 대본을 주는 스크립트 언어

하지만, 최근에는 스크립트 언어들을 실행하는 환경이 발전해서 스크립트 언어가 단순히 스크립트 용도가 아니라 프로그래밍도 가능해지게 되었다. (이제 js 하나로 프론트/백이 다 가능해짐!)

1. Javascript 살펴보기

- 함수: 특정 기능을 수행하는 코드 덩어리

function 함수이름() {
    // 여기 함수가 할 일 작성
}

- 조건문: if-else / if-else if-else

if (조건문) {
    // 조건문에 true 일 때 실행할 코드
} else {
    // 조건문이 false 일 때 실행할 코드
}

- 변수: 값을 담아 놓는 상자

var -> ES6 전부터 있었고, 현재 잘 쓰지않음
let -> ES6 부터 나옴, 초기화하고 값 할당은 나중에 해도 됨 + 값을 바꿀 수 있음
const -> ES6 부터 나옴, 초기화& 값 할당을 동시에 해야함 + 값 바꾸기 불가

let 이름; // o
let 이름 = 데이터; // o
let 이름 = 다른데이터; // o

const 이름; // x -> 에러남
const 이름 = 데이터; // o
const 이름 = 다른데이터; // x -> 에러남, 값 바꾸기 불가

- 주석

// 주석이다

/*
주석이다
*/

2. HTML 에 JavaScript 적용하기

HTML 에 Javascript 를 적용하는 방법은 3가지가 있다.

인라인 (Inline) : 사용자와 상호작용이 있을 때만 가능
내부 스크립트 (internal script) : HTML 문서 안에 같이 작성
외부 스크립트 (external script) : HTML 문서 밖에 작성하고 연결

2.1. 인라인 (Inline)

인라인은 사용자와 상호작용이 있을 때에만 쓸 수 있다. 사용자와의 상호작용은 속성으로 잘 만들어져 있다.

태그 안에서 on만치면 on어쩌고로 되어있는 속성이 뜨는데, 이 속성들을 이용하면 된다.

사용자와의 상호작용이 있는 것들을 속성으로 만들어 놓음 -> on어쩌고

ex)

버튼으로 만들어진 <input> 태그이다. 버튼을 클릭했을 때 팝업창이 뜨도록 하고 있다.

<input id="btn_login" type="button" value="login" onclick="alert('팝업이다')">

2.2. 내부 스크립트 (internal script)

내부 스크립트 작성하는 방법을 알아보기에 앞서 자바스크립트에서 특정 태그(element) 를 찾는 법 먼저 알아보자.

특정 태그는 CSS 에서 속성을 적용할 때 사용했던, id / class / 태그이름을 사용해서 찾을 수 있다.

id 로 찾기: document.getElementById('아이디')
class 로 찾기: document.getElementByClassName('클래스 이름')
태그로 찾기: document.getElementByTagName('태그 이름')

document 는 html 문서를, 점(.) 은 of 의 뜻을 가지고 있다.

-> document.getElementById 는 html 문서에서 id 로 element 를 가져오겠다

-> document.getElementByClassName 은 html 문서에서 class 로 element 를 가져오겠다

-> document.getElementByTagName 은 html 문서에서 tag 이름으로 element 를 가져오겠다

이제 내부 스크립트를 작성하는 방법을 알아보자.

<body> 태그의 끝 부분에 <script> 태그를 작성하고, 그 안에 코드를 작성하면 된다.

아래의 코드에서는 <script> 태그안에,

아이디 입력란에 입력된 값이 있다면 팝업창에 입력값을 띄우고

아이디 입력란에 입력된 값이 없다면 팝업창에 아이디를 입력해달라는 문구를 띄우는 함수를 만들어 놓았다.

그리고 버튼의 onClick 속성에 만든 함수를 집어넣어 사용했다.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>LOGIN</title>
        <link rel="stylesheet" href="login.css">
    </head>
    <body>
        <h1>Login</h1>
        <form>
            ID : <input id="txt_id" class="login_inputs" type="text">
            <br>
            PW : <input class="login_inputs" type="password">
            <br>
            <input id="btn_login" type="button" value="login"
            onclick="popId()">
        </form>
        <script>
            // ID 란에 입력된 값을 팝업창에 띄우기
             function popId() {
                id = document.getElementById('txt_id').value
                if (!id) {
                    alert('아이디를 입력해주세요.');
                } else {
                    alert(id);
                }
             }
        </script>
    </body>
</html>

2.3. 외부 스크립트 (external script)

2.2. 내부 스크립트에서 <script> 태그 안에 썼던 내용을 js 파일을 따로 만들어서 거기로 옮기면 된다.

html 파일에 js 파일을 연결하려면 <head> 태그 안에 <script> 태그를 넣고 아래처럼 쓰면 된다.

<script type="text/javascript" src="login.js"></script>

<!-- login.html -->

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>LOGIN</title>
        <link rel="stylesheet" href="login.css">
        <script type="text/javascript" src="login.js"></script>
    </head>
    <body>
        <h1>Login</h1>
        <form>
            ID : <input id="txt_id" class="login_inputs" type="text">
            <br>
            PW : <input class="login_inputs" type="password">
            <br>
            <input id="btn_login" type="button" value="login"
            onclick="popId()">
        </form>
    </body>
</html>

// logig.js

// ID 란에 입력된 값을 팝업창에 띄우기
 function popId() {
    let id = document.getElementById('txt_id').value
    if (!id) {
        alert('아이디를 입력해주세요.');
    } else {
        alert(id);
    }
 }

실습 화면

- myFunc() 코드 캡쳐, ID 입력값에 이름넣고 팝업 띄운 화면 캡쳐

- 함수 생성 및 호출 결과 코드 업로드

// var, let, const
function compare() {
    let num1 = 10;
    // const num1 = 10;
    alert('num1은' + num1);
    num1 = 20;
    alert('num1은' + num1);
}

// ID 란에 입력된 값을 팝업창에 띄우기
 function popId() {
    let id = document.getElementById('txt_id').value
    if (!id) {
        alert('아이디를 입력해주세요.');
    } else {
        alert(id);
    }
 }

// 나만의 함수 만들고, 버튼 클릭하면 호출하기
 function myFunc(num) {
    alert(num);
    alert(num+1);
    alert(num+2);
 }

<input id="btn_login" type="button" value="login" onclick="myFunc(1)">

728x90

'TIL with Programmers' 카테고리의 다른 글

[TIL] 8/23 데이터베이스, SQL, docker, mariadb, db연결, 프론트랑 백 연동하기 (0)	2024.08.23
[TIL] 8/22 클라이언트-서버, Node.js, HTTP, request, reponse, URL, 라우터, 핸들러 (0)	2024.08.22
[TIL] 8/20 웹(Web), 인터넷, 클라이언트-서버, 프론트엔드, 백엔드 (0)	2024.08.20
[TIL] 8/19 협업 Tool(Trello, Jira, Notion) 사용하기, 애자일, 스프린트, 스크럼 (1)	2024.08.20
[8/16] merge, fetch, pull, pull request, branch, fast-foward, 3-way (0)	2024.08.16

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

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

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

얼렁뚱땅 코딩일기

[TIL] 8/21 CSS, Javascript - Inline, internal, external

CSS

1. 인라인 (Inline)

2. 내부 스타일 시트 (internal style sheet)

3. 외부 스타일 시트 (external style sheet)

추가 - 주석달기

Javascript

1. Javascript 살펴보기

2. HTML 에 JavaScript 적용하기

'TIL with Programmers' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

[TIL] 8/21 CSS, Javascript - Inline, internal, external

CSS

1. 인라인 (Inline)

2. 내부 스타일 시트 (internal style sheet)

3. 외부 스타일 시트 (external style sheet)

추가 - 주석달기

Javascript

1. Javascript 살펴보기

2. HTML 에 JavaScript 적용하기

'TIL with Programmers' 카테고리의 다른 글

관련글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역