개발자와 커뮤니케이션

개발자들의 용어 정리 7 [웹사이트, 웹 브라우저, HTML, CSS]

프로테크 2022. 12. 6. 00:30

웹 사이트

사용자가 가장 많은 소프트웨어가 웹 사이트이다.

 

모바일 애플리케이션(일명 앱)이라고 알고 있는 S/w 중 실제론 웹 사이트 인 것이 많다.

 

사용자가 많은 만큼 IT업계에 웹 개발자 비율도 매우 높은 편.

 

 

웹 브라우저

웹 사이트 열람에 필요한 S/w

 

웹 사이트를 열어 인터넷 서핑을 하는데 사용되는 S/w를 웹 브라우저, 줄여서 브라우저 라고 한다.

 

*.html 형식으로 문서를 읽는다.

 

검색창 -> 주소 입력(요청하다) -> 사용자 + 브라우저(요청) + 서버(응답) -> 화면 표현(클라우드단)

 

 

화면 표현(클라우드단)시 

 

화면의 골격은 HTML로, 꾸며주는 기능은 CSS, 각 요소에 프로그래밍은 Javascript로 기능들이 구성된다.

 

HTML, CSS : 정적 언어

 

Javascript : 동적 언어

 

 

HTML

요소를 가져다 놓는 마크업 언어

 

body, div, h1 등을 태그라 부르며 <태그>로 시작, </태그>로 마무리 하는 형식을 갖는다.

 

Ex> 

 

<body>

  <div>

  <h1>버튼 클릭 수 표시<h1>  // h1 형식으로 문자열 "버튼 클릭 수 표시"

  <span>0</span>                   // "0" 표시

  <button>클릭!</button>        // 버튼 그림 불러오며 "클릭!" 문자열 표시.

 </div>

</body>

 

위처럼 HTML은 웹 페이지에 어떤 요소를 어떻게 놓을지

 

그저 "배치"하는 설계도 입니다.

 

즉, 구조도에 불과합니다.

 

※ 문서나 데이터의 구조를 표현하는 데 사용되는 언어를 마크업 언어라고 함.

 

 

CSS

요소를 꾸미는 스타일 언어

 

HTML 코드를 예쁘게 꾸며주는 것이 CSS 이다.

 

CSS는 HTML과 마찬가지로 마크업 언어(Markup language)이며 실제로 표시되는 방법을 기술하는만큼

 

스타일 언어(style sheet language)라고 한다.

 

 

Ex>

 

body {

  margin: 24px;

}

  div {

     display: inline-block;

     padding: 12px 32px 24px 32px;

     border: 2px solid #b6d4fe;

     border-radius: 12px;

     text-align: center;

}

 

 

CSS는 디자인 속성을 지정해주는 역할만 담당하므로 프로그래밍 언어는 아닌 스타일 언어로 불린다.

 

주로 웹 디자이너들이 잘 쓴다.