[프로그래머스 데브코스] TIL - 2주차 Day3

방울·2024년 4월 18일

프로그래머스 데브코스

목록 보기

6/16

🎨 CSS의 이해

CSS란?

CSS(Cascading Style Sheets)는 HTML로 작성된 웹 페이지를 꾸며주는 스타일 시트 언어. HTML 요소 각각에 스타일을 적용해서 세밀하게 디자인 할 수 있다. CSS를 활용하면 웹 페이지의 색상, 정렬, 폰트 등 다양한 시각적 요소를 손쉽게 조정할 수 있다. CSS를 HTML에 적용하는 방법은 크게 세 가지가 있다.

1. 인라인 스타일(Inline Style)

HTML 태그 내에 style 속성을 사용하여 직접 스타일을 적용하는 방법. 각 태그에 개별적으로 스타일을 적용할 수 있으나, 스타일 정보가 HTML과 혼합되어 관리가 복잡해질 수 있다.

<h1 style="color: cornflowerblue; text-align: center;">로그인</h1>

2. 내부 스타일 시트(Internal Style Sheet)

HTML 문서의 <head> 섹션 내에 <style> 태그를 사용하여 스타일을 정의하는 방법. 하나의 HTML 문서에만 적용되며, 문서 내에서 요소를 일괄적으로 스타일링 할 수 있다.

<style>
    h1 {
        color: cornflowerblue;
        text-align: center;
    }
    .login_input {
        font-size: 20px;
    }
    #btn_login {
        font-size: 20px;
        width: 100px;
        height: 30px;
    }
</style>

인라인보다 코드가 훨씬 깔끔하고 알아보기 편리함

3. 외부 스타일 시트(External Style Sheet)

CSS 코드를 별도의 파일로 작성하고 HTML 문서에서 링크를 통해 참조하는 방법. 여러 HTML 문서에서 동일한 스타일 시트를 재사용할 수 있어 유지보수가 용이하다.

<link rel="stylesheet" href="login.css">

각 방법은 사용 상황에 따라 장단점이 있으며, 큰 프로젝트에서는 주로 외부 스타일 시트를 사용하여 스타일을 관리하는 것이 일반적이다. 외부 스타일 시트를 사용하면 HTML과 CSS를 분리하여 관리할 수 있기 때문에, 코드의 가독성과 재사용성이 향상된다.

Javascript의 이해

Javascript란?

Javascript는 웹 페이지에서 사용되는 스크립트 언어로, 특정 HTML 요소를 선택하여 동적으로 제어할 수 있고 사용자와의 상호작용을 가능하게 한다.(예: 글자 변경, 버튼 비활성화, 색상 변경 등)

스크립트 언어란?

독립적인 프로그램을 개발할 수 있는 프로그래밍 언어가 아닌 (프로그램 내부의 구성 요소 중 하나로)프로그램을 제어하는 스크립트 역할을 하는 언어이다. 최근 빠르게 발전하는 런타임 환경 덕분에 스크립트 언어만으로도 충분히 프로그래밍이 가능해져 역할이 확장되고 있다.

HTML에 Javascript를 적용하는 방법

인라인(Inline): HTML 태그의 이벤트 속성에 직접 스크립트 코드를 작성한다. 예를 들어, 버튼에 클릭 이벤트를 추가할 때 사용한다.
내부 스크립트(Internal script): HTML 문서 내에 <script> 태그를 사용해 스크립트를 직접 삽입한다.
외부 스크립트(External script): 외부 .js 파일을 작성하고 HTML 문서에 연결한다. 이 방법은 유지보수가 쉽고, 여러 HTML 문서에서 재사용할 수 있다.

인라인 스크립트 예제

<input id="btn_login" type="button" value="Login" onclick="alert('clicked!')">

onclick 속성을 사용하여 사용자가 버튼을 클릭하면 경고창이 나타나게 한다.

함수(Function)

특정 기능을 수행하는 코드 블록. 필요할 때마다 호출하여 사용할 수 있다.

function 함수 이름(){
	// 함수가 수행할 작업
}

내부 스크립트 예제

태그를 찾고 이벤트를 처리하는 자바스크립트 함수를 내부 스크립트로 작성할 수 있다.

<script>
    /* ID란에 입력된 값을 팝업창에 띄우기 */
    function popId(){
        alert(document.getElementById('txt_id').value);     
    }

    /* 나만의 함수 만들고, 버튼 클릭하면 호출하기 */
    function myFunction(){
        alert('로');  
        alert('그');
        alert('인');
    }
</script>

HTML 요소(element) 찾는 방법

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

~~document는 해당 문서를 뜻하고 .은 해당 문서 중에서 ~의(Of)란 뜻~~

조건문(if문)

조건문은 특정 조건에 따라 다른 행동을 하도록 프로그램을 지시하는 구문이다. JavaScript에서 if문은 주어진 조건이 참(true)일 때 코드 블록을 실행하고, 그렇지 않을 경우 다른 코드 블록을 실행할 수 있도록 한다.

if (조건) {
    // 조건이 참일 때 실행될 코드
} else {
    // 조건이 거짓일 때 실행될 코드
}

예를 들어, 사용자가 입력한 아이디가 비어 있는지 확인하고, 비어 있다면 경고 메시지를 표시하려고 한다면 아래와 같이 코드를 작성할 수 있다.

if (userId === '') {
    alert('아이디를 입력해주세요.');
} else {
    alert('입력된 아이디: ' + userId);
}

변수

변수는 데이터를 저장할 수 있는 저장공간이다.~~(데이터(값)을 담아놓는 상자)~~ JavaScript에서 변수를 선언하는 키워드에는 let, var, const가 있다. 각각의 키워드는 변수의 사용범위와 수정 가능성에 따라 선택해서 사용한다.

let: 블록 범위(scope) 지역 변수를 선언하며, 선언된 블록, 문 또는 표현식에서만 유효하다. 변수의 값이 변할 수 있다.
var: 함수 범위(function scope) 지역 변수를 선언하며, 오래된 프로젝트나 구식 코드에서 주로 볼 수 있다.
const: 값이 변경되지 않는 상수를 선언할 때 사용한다. let과 마찬가지로 블록 범위를 가지며, 한번 할당된 값은 변경할 수 없다.

변수를 사용하면 중복을 최소화하여 코드를 더욱 깔끔하고 관리하기 쉽게 만들 수 있으며, 데이터를 효율적으로 처리할 수 있다.

📦 변수는 쉽게 말해 상자라고 할 수 있다. 데이터(값)를 담아놓는 상자! 상자 안에 데이터를 담아두고, 뭐가 들어있는지 이름표를 달아주면 된다.

외부 스크립트

JavaScript 코드를 별도의 파일에 작성하고 HTML 문서에 연결하여 사용하는 방법. 이를 통해 HTML 문서와 JavaScript 코드를 분리함으로써 유지보수가 쉽고, 코드의 재사용성이 높아진다.

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

src 속성에는 외부 JavaScript 파일의 경로를 지정한다. 이렇게 하면 해당 JavaScript 파일의 코드가 HTML 문서에서 실행된다. 이 방식은 웹 페이지의 로딩 속도를 최적화하고, 스크립트 관리를 간편하게 할 수 있는 장점이 있다.

방울

방울방울

이전 포스트

[프로그래머스 데브코스] TIL - 2주차 Day2

다음 포스트

[프로그래머스 데브코스] TIL - 2주차 Day3