[DevCamp] CSS와 JS 함수

동건·2025년 2월 3일

CSS devcamp js 프로그래머스 함수

DevCamp

목록 보기

7/85

오늘은 프론트엔드라면 꼭 알아야하는 CSS와 Javascript에 대해 알아보겠다.

CSS?

Cascading Style Sheets 의 약자로, HTML을 꾸며주는 언어이다.

문서를 통째로 한번에 꾸며주는 것이 아니라, HTML 태그를 하나하나 꾸며준다.

HTMl에 CSS를 적용하는 방법은 다음과 같이 3가지가 있다.

인라인(inline) :
HTML 태그 안에 같이 작성한다.

내부 스타일 시트 (internal style sheet) :
HTML 문서 안에 같이 작성한다.

외부 스타일 시트 (external style sheet) :
HTML 문서 밖에 작성하고 연결한다.

* HTML 태그 한쌍(<태그>...</태그>) 또는 하나 (<태그/>)를 우리는 element 라고 부르기도 한다.

순차적으로 알아보자

1. 인라인 (inline)

말그대로 라인 안에 작성하는 방법이다.
아래는 그 예시다.

ID: <input type="text" style="width: 300px">
<br>
PW: <input type="password" style="width: 300px">

위처럼 element 안에 직접 style을 지정하는 방법이다.
CSS 속성은 굉장히 많아 암기하는 것은 한계가 있어 직접 해보면서 익히는 방법이 제일 좋고
혹은 궁금한 CSS 속성이 있다면 갓갓 구글링도 정말 좋은 방법이다.

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

인라인 방법으로 계속 작성하다보면 코드가 길어지기 다반수다.
이는 코드 가독성이 떨어져 보기 좋지 않을때가 있다.
그럴때는 HTML 문서 안에 CSS 코드를 모으는 것이다.

아래 예시를 작성하겠다.

<style>
  input{
  	width: 300px;
  }
</style>
...
ID: <input type="text">
<br>
PW: <input type="password">

위 예시를 보면 <style> 태그를 직접 선언해 안에 스타일을 지정하는 것이다.
스타일을 지정해야할 때 꼭 알아야하는 개념이
id와 class이다.

지금은 예시가 간단해서 괜찮지만
만약 ID란과 PW란의 input 스타일링을 다르게 하려면?
바로 id 와 class 를 활용하는 것이다.

id 와 class 의 활용과 차이점은
나중에 더 자세히 작성해보겠다.

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

내부 스타일 시트와 작성하는 것은 비슷하지만
스타일을 지정하는 위치가 HTML 밖에서 지정하는 것이다.

예시를 보면 쉽게 이해할 수 있다.

매우 간단하다.

.css

저 login.css 파일 안에
<style> 태그 안에 작성해두었던 스타일을 옮기면 끝이다.

하지만 옮기기만 했다고 바로 스타일이 적용되는 것은 아니다.

아래의 사진같이 login.css 파일을 불러오는 작업을 해야한다.
<head> 태그 안에 위 사진처럼 작성하면 정상적으로 스타일이 적용된다!

Javascript?

Javascript는 특정 HTML요소를 선택하여 제어할 수 있는 스크립트 언어이다.
최근에는 백엔드 언어로도 각광받고 있다.

이때 스크립트 언어란?

독립적인 프로그램을 개발할 수 있는 프로그래밍 언어가 아닌
"프로그램 내부의 구성 요소 중 하나 프로그램을 제어하는 스크립트 역할을 하는 언어" 이다.

최근 빠르게 발전하는 런타임 환경 덕분에
스크립트 언어 만으로도 충분히 프로그래밍이 가능해져, 역할이 확장되고 있다.

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

인라인 :
사용자와의 상호작용이 있을 때만 가능하다.
예를 들어, 버튼을 클릭 했을 때, 키보드를 눌렀을 때 등...

내부 스크립트 :
HTML 문서 안에 같이 작성한다.

외부 스크립트 :
HTML 문서 밖에 작성하고 연결한다.

함수?

함수 란, 특정 기능을 수행하는 코드 덩어리이다.
우리는 함수를 다음과 같이 정의한다.

function 함수이름(){
	...
}

함수는 직접 예시를 소개하면서 설명하겠다.

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

myFunction 이라는 이름의 함수를 만들었다.
이 함수의 기능은 1, 2, 3을 순차적으로 화면에 띄우는 기능이 있다.

그러면 이제 이 함수를 어디에서 사용할지 정해야한다.


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="myFunction()">

onclick 은 클릭했을때 발생하는 이벤트이다.
저 onclick 안에 myFunction() 을 작성해 함수를 불러오는 것이다.
그러면 버튼을 클릭하면?
정상적으로 화면에 1, 2, 3이 출력된다.

살짝 더 응용해
아이디 입력받는 곳에 어떤 값을 입력했는지
버튼을 클릭하면 아이디의 값이 화면에 출력되는 함수를 만들어보겠다.

특정 태그를 찾는 방법

Javascript 에서는 특정 태그를 찾을 때 다음과 같은 기능을 이용한다.

id로 찾기 :
document.getElementById('아이디')

class로 찾기 :
document.getElementByClassName('클래스 이름')

tag 이름으로 찾기 :
document.getElementByTagName('태그 이름')

위 방법을 토대로 아이디 입력창을 선택해보자.

function popId(){
	 alert(document.getElementById('txt_id'));
}

이렇게만으로 값이 나오면 좋겠지만 바로 값이 나오지는 않는다.

우리는 지금 txt_id 라는 id의 input을 선택하기만 했고
그 값을 불러오지는 않았다.

간단하게 값을 가져올 수 있다.

function popId(){
	 alert(document.getElementById('txt_id').value);
}

이렇게 뒤에 value 를 붙혀서 값을 불러오면 된다.

조금 더 응용해서
ID 값이 입력되지 않았다면 아이디 값을 입력하라는 경고창이 뜨면 좋을 것 같다.

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