웹 서비스의 이해 (2) - CSS와 자바스크립트

/date 24.08.21.

 

[예제로 배우는] CSS의 이해

inlineCSS 속성 찾는 법(검색)

CSS란 무엇일까요?

Cascading Style Sheets의 약자로, HTML을 꾸며 주는 언어입니다. 문서를 통째로 한 번에 꾸며준다고 생각하기 쉬운데, 그것이 아니라 HTML 태그 하나하나를 꾸며줍니다.

 

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

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

인라인 CSS를 적용해 보면 아래와 같이 코드가 작성됩니다.

 

해당 HTML 파일을 실행하면 CSS가 잘 적용된 것을 확인할 수 있습니다.

 

 

inline CSS 속성 몇 가지

• style = "color: ~" ) 색상 바꾸기
• text-align: center ) 가운데 정렬
• font-size: ~ ) 글씨 크기 설정(픽셀 단위)

 

내부 스타일 시트

인라인으로 작성했던 태그들을 head 태그 안에 다 모으는 것입니다. 특정 엘리먼트를 지정하여 CSS를 적용하고 싶다면 아래 방법들이 있습니다.

• 해당 태그를 쓰고 대괄호를 열고 적용: ex) H1 { }
• 클래스를 지정하고 그 클래스를 위한 속성 지정: ex) .(클래스명) { }
• ID를 지정하고 그 아이디를 위한 속성 지정: ex) #(아이디명) { }

 

내부 스타일 시트를 작성하면 아래와 같이 코드를 작성하게 됩니다. head 부분이 상당히 길어진 모습을 볼 수 있습니다.

 

외부 스타일 시트

내부 스타일 시트를 사용하여 head 태그 안에 CSS를 다 모은다면 나중에 코드를 유지보수하기에 유리합니다. 그렇다면 이 코드를 아예 다른 파일로 관리하면, 더더욱 유지보수하기에 편리하겠죠? 외부 스타일 시트를 활용하여 그렇게 진행할 수 있습니다.

 

Head 태그에 넣었던 코드와 동일한 코드를 CSS 파일을 생성해 붙여넣고, 기존 HTML 파일에서 연결해 주면 외부 스타일 시트가 완성됩니다. 연결해 주는 코드는 다음과 같습니다.

• <link rel="stylesheet" href="(css 파일명)">

 

아래 사진처럼 head 태그 안에 css 파일을 외부에서 연결하겠다고 작성합니다.

 

그리고 외부 스타일 시트를 내부 스타일 시트와 동일한 코드로 채워주고 HTML 파일을 실행하면 CSS가 정상적으로 적용된 것을 확인할 수 있습니다.

 

 

 

[예제로 배우는]Javascript의 이해

자바스크립트의 역할과 스크립트 언어

자바스크립트란 무엇일까요?

자바스크립트는 특정 HTML 요소를 선택하여 제어할 수 있는 스크립트 언어입니다. 예를 들어, 버튼의 글자를 바꾼다거나, 특정 상황에서 비활성화를 한다거나, 버튼의 색을 바꾼다는 등의 역할을 수행할 수 있습니다. 최근에는 백엔드 언어로도 각광받고 있습니다.

HTMl에 자바스크립트를 적용하는 방법은 놀랍게도 CSS와 동일합니다. 인라인, 내부 스크립트, 외부 스크립트 3가지의 방법을 이용하면 됩니다.

 

스크립트 언어라는 표현을 사용하였는데, 스크립트 언어란 독립적인 프로그램을 개발할 수 있는 프로그래밍 언어가 아닌 "프로그램을 제어하는 스크립트 역할을 하는 언어"입니다. 하지만 최근 빠르게 발전하고 있는 런타임 환경 덕에 스크립트 언어만으로도 충분히 프로그래밍이 가능해져, 역할이 확장되고 있습니다.

 

 

나만의 함수 만들고 버튼 클릭하면 함수 호출하기

함수란 무엇일까요?

프로그래밍에서 함수란 특정 기능을 수행하는 코드 덩어리입니다. 자바스크립트의 함수 형태는

function 함수_이름 () {

    //이 공간에 함수가 할 일을 코드로 작성하기

}

이런 형태를 보이고 있습니다.

 

내부 스크립트: 특정 태그 지정 방법, 아이디 입력 값 팝업 띄우기!

특정 태그를 찾는 방법은 아래 세 가지가 있습니다.

• 아이디로 찾기: document.getElementById('아이디')
• 클래스 이름으로 찾기: document.getElementsbyClassName('클래스 이름')
• 태그 이름으로 찾기: document.getElementsbyTag('태그 이름')

 

그렇다면 이 코드를 활용해서 내부 스크립트를  쓰고 싶을 땐 어떻게 해야 할까요? 

간단합니다. body 태그의 가장 끝 부분에 <script></script> 태그를 달고 그 안에 작성하면 됩니다.

 

 

조건문

조건에 따라 다른 결과를 선택할 수 있도록 하는 조건문을 자바스크립트에서 활용할 수 있습니다. 그 형태는 아래와 같습니다.

 

if(조건) {
   //조건에 맞는 경우 특정 결과를 낼 수 있는 코드 작성
} else {
   //조건에 맞지 않는 경우 특정 결과를 낼 수 있는 코드 작성
}

 

value 값이 없는지 확인하는 방법

• document.getElementByID('아이디') == ""
• !document.getElementByID('아이디')

 

변수와 외부 스크립트

변수는 데이터를 담을 상자를 생성하는 것과 같습니다. 변수를 지정하는 코드는 let, var, const가 있는데 각각이 어떤 차이가 있는지는 아래와 같습니다.

• var는 거의 쓰지 않습니다. 원래는 let과 const의 역할을 모두 var가 하고 있었으나, 이제는 그 역할을 나누어 주면서 사용하지 않게 되었습니다.
• let은 상자 안에 들어가는 데이터의 값을 바꿀 수 있습니다.
• const는 안에 들어가는 데이터의 값을 바꿀 수 없습니다. 오류가 발생하지만 어떤 오류인지 알려주지 않으므로 주의해야 합니다.

 

앞서 내부 스크립트로 작성하였던 내용을 그대로 외부 스크립트 파일에 붙여 넣고, 마찬가지로 연결을 해주면 정상적으로 작동합니다. 연결 태그는 <script type="txt/javascript" src="외부 스크립트 파일명"></script> 입니다.

 

 

 

배운 내용을 토대로 ID를 입력하면 팝업으로 불러오는 함수를 작성해 보았습니다.

 

추후 변수 설정으로 아이디 value를 불러오는 것으로 수정하였습니다. 잘 작동하는지 확인해 보겠습니다.

 

HTML 파일을 실행하여 ID 칸에 제 이름인 romi를 넣고 로그인을 눌렀습니다.

 

알림창에 제가 적은 아이디가 제대로 보여지네요! 야호!