UXUI 웹디자인 과정_과제/1달차

[UXUI 웹디자인] 1달차 과제_1 / html, css 내용 정리

  • 웹 브라우저
    HTML 문서 및 멀티미디어 파일 등을 출력하는 프로그램. 대표적으로는 IE, Chrome, Firefox 등이 있으며 최근에는 크로미움 엔진을 기반으로 한 Edge, 웨일 브라우저도 등장했다.

  • HTML
    Hyper Text Mark-up Language의 약자로, 웹 페이지를 만들기 위한 언어이며 웹 브라우저 위에서 작동한다.

  • CSS
    HTML로 작성된 언어가 보여지는 방식을 결정하는 언어. 단독으로 동작하기 보다는 HTML에 종속되는 개념으로 HTML이 뼈대라면 CSS는 디자인의 역할을 한다.

  • ul / ol
    각각 unorder list / order list를 의미하며 HTML에서 목록을 만들 때 사용하는 태그. 해당 태그 내부에 <li> 로 항목을 작성한다.

  • style
    해당 문서에서 작성된 다른 태그가 어떻게 보여질지 지정하는 태그이며 CSS 언어로 작성한다. 태그에 속성값으로 넣을 수도 있지만 보통은 <head>에 <style>로 작성하거나 별도의 CSS 파일로 분리하여 작성한다.

  • div
    division, 영역이라는 말 그대로 HTML에서 영역을 만들 때 사용하는 태그. display 속성이 block이기 때문에 div 뒤에 오는 태그는 아래로 표시되며 와이어 프레임 제작 시 많이 사용된다.

  • display:block, inline, inline-block
    CSS 속성 중 하나로 요소가 어떻게 보여질지를 결정하는 속성. 속성의 각 옵션은 다음과 같다.
    - block : 세로 배치, 크기 지정 가능
    - inline : 가로 배치, 크기 지정 불가능 (글자크기와 동일됨)
    - inline-block : 가로 배치, 크기 지정 가능

 

 

 

  • CSS의 속성

    • id, class (#, .)
      특정 태그에 이름이나 속성을 일괄 부여하기 위해 사용하는 태그 속성값
      - id : 중복 사용 불가하여 이름 붙일 때 주로 사용. CSS 작성 시 앞에 #를 붙인다.
      - class : 속성 부여 시 사용하며 jquery랑 조합해서 사용하기도 한다. CSS 작성 시 앞에 .을 붙인다.
    • width
      요소의 너비를 지정하는 속성. 통상적으로 px 단위로 입력하거나 % 단위로 입력한다.
    • height
      요소의 높이를 지정하는 속성. 통상적으로 px 단위로 입력하거나 % 단위로 입력한다.
    • background, background-color
      요소의 배경을 지정하는 속성. 색상 또는 컬러코드로 배경색을 지정하거나 이미지 주소를 넣어서 배경 이미지를 지정할 수 있다. background-color는 별도로 배경색을 지정한다.
    • border-raridus
      요소의 모서리를 둥글게 깎는 속성. border(경계선)-radius(반지름) 라는 뜻이다. px 단위 등을 입력하며 입력값이 클 수록 더 둥글게 깎인다.