새소식

HTML, CSS

HTML, CSS 기초 : 웹을 구성하는 요소

  • -

HTML, CSS, 자바스크립트

  • HTML : HyperText Markup Language(하이퍼 텍스트 마크업 언어)의 약자. 웹사이이트를 만들기 위해 사용하는 프로그래밍 언어 중 하나. 설계 작업. 웹사이트에 접속 시 눈에 보이는 정보(텍스트,이미지) 등을 HTML로 입력

  • CSS : 디자인 작업. 공간과 정보에 디자인을 입히는 역할(공간 크기 설정, 글자 색 변경 등)

  • 자바스크립트 : 기능 작업. (이미지 슬라이드 효과, 팝업 알림 등)

웹 사이트 레이아웃의 종류

  • 정적 레이아웃 : 공간의 크기가 변하지 않는 고정 레이아웃. 데스크톱 화면보다 크게 제작된 웹사이트를 접속하면 콘텐츠가 잘린 상태로 출력되면서 스크롤이 발생. 스마트폰, 태블릿 등에서는 웹사이트 크기가 각 기기화면에 맞게 작게 출력되지만, 사용자가 특정영역을 터치해 확대해가며 웹 사이트를 이용해야하므로 불편함 유발. 최근에는 이러한 환경에 유의해 적응형이나 반응형으로 웹사이트를 많이 제작.

  • 동적 레이아웃 : 브라우저의 너비와 관계없이 화면에 콘텐츠가 꽉 채워지도록 제작된 레이아웃. 브라우저의 너비가 바뀌면 공간 크기가 동적으로 변해 가로스크롤이 나타나지 않음. 공간크기에 따라 글이 나열되는 방식이 달라지므로 전체 레이아웃이 틀어지는 문제 발생.

  • 적응형 레이아웃 : 브라우저 너비에 따라 레이아웃이 변경됨. 공간의 크기는 고정되지만 사용자가 사용하는 기기의 너비에 따라 레이아웃의 형태가 바뀐다. 다양한 기기화면을 지원하며, 반응형 레이아웃보다 제작시간이 적게든다.

  • 반응형 레이아웃 : 동적 레이아웃과 적응형 레이아웃을 결합한 레이아웃. 브라우저의 너비를 줄이면 공간이 재조명 되면서 레이아웃의 배치가 달라진다.

크로스 브라우징

  • 크로스 브라우징 : 브라우저의 종류(인터넷 익스플로러(IE),크롬,사파리 등)와 버전에 상관없이 웹사이트가 동일하게 보이면서 정상적으로 작동되게 하는 기법. 특정 언어의 지원 여부를 브라우저 버전별로 보여주는 웹 사이트(Can I use)에서 내가 사용하는 개발 언어의 특정 기능을 브라우저에서 지원하는지 반드시 확인할 것.

웹 표준

  • 웹 표준 : 웹 사이트를 제작할 때 지켜야 할 일종의 규칙
Contents

포스팅 주소를 복사했습니다

이 글이 도움이 되었다면 공감 부탁드립니다.