본문 바로가기

css

 (7)
[입문] HTML Tag 기본 01. 문서 타입 선언 문서 형식 정의(Document Type Definition, DTD) 태그는 출력할 웹 페이지의 형식을 브라우저에게 전달한다. 문서의 최상위에 위치해야 하며, 대소문자를 구별하지 않는다. 문서별 기술 양식이 있었으나, HTML5이 표준이 되어 HTML5 문서 형식 정의만 사용한다. 02. html Tag html 태그는 모든 HTML 요소의 부모이며, 웹 페이지에 단 하나만 존재한다. 문서 타입 선언 태그 이외의 모든 HTML 태그는 HTML 내부에 작성해야 한다. Global Attribute (전역 속성)을 지원하며, 특히 lang 속성을 HTML 태그에 사용하는 경우가 많다. 03. head Tag head 태그는 메타데이터를 포함하기 위한 요소이며, html 태그와 마찬가..
CSS 변수 선언하기 필자가 햇병아리 시절, CSS를 사용하며 많은 불편함을 느꼈던 것 중 하나는 색상 값을 #FFFFFF 혹은 rgb(255,255,255) 처럼 16진수나 RGB 값으로 입력해줘야 했던 것이다. 웹 퍼블리싱을 하다보면 색상 값을 잊어먹을 때가 종종 있다. 물론 LESS나 SASS(SCSS) (이하 전처리기)를 쓰게 되면서 이 부분은 해소되었지만 설정을 해야 하는 불편함도 있고, 전처리기를 사용하지 않으면 변수를 어떻게 선언할지 모르는 문제가 있었다. 왜 색상 값을 그냥 쓰지 않고 변수에 집착할까? .text { color:#000000; } .text { color:black; } 위 코드를 보았을 때, 어느 색상 값이 더 외우기 편한가? 개인마다 편차는 있겠지만 대부분 단어로 된 경우가 더 외우기 쉬울 ..
웹 퍼블리셔로 입문하기 위해 도움이 되는 사이트 3선 1. W3Schools : https://www.w3schools.com/ 2015년 10월, [NCS 기반]디지털(UI/UX를 활용한 모바일 웹) 디자인 실무과정 이라는 교육 프로그램을 이수하면서 가장 처음 들었던 사이트다. 오래 전부터 존재했던 사이트고 웹 퍼블리싱을 하는 사람들이라면 모르는 사람이 없을 정도로 유명한 사이트다. 영어로 되어 있어 보기가 어렵다는 단점이 있지만 영어와 함께 공부를 할 수 있으니 일석이조다. 사이트 자체에 내장된 에디터로 예제를 실행할 수 있어 내 마음대로 코드 내용을 바꿔볼 수 있다. 2. PoiemaWeb : https://poiemaweb.com/ 웹 프로그래밍 튜토리얼 | PoiemaWeb Front-end Development Tutorial poiemaweb...
CSS 작성 시 유의사항 CSS를 작성하기 시작하면, 본격적으로 웹페이지를 만들기 시작하는 웹 퍼블리셔의 첫 걸음을 뗐다고 볼 수 있다. CSS에 대한 사용법과 노하우 등을 소개하기 전에 CSS 작성 시 지켜야할 가이드라인이 있는데 그 부분을 먼저 소개한다. HTML과 마찬가지로 룰을 정해두고 지키는 것이 좋으며, 내가 작성한 CSS를 남들이 봤을 때도 알아보기 쉽도록 작성하는게 가장 좋다. SMACSS, BEM, OOCSS처럼 CSS를 작성하는 방법론이 있는데 이 부분은 다음에 다뤄보도록 하겠다. 1. 문법 (Syntax) /* Bad CSS */ .selector, .selector-secondary, .selector[type=text] { padding:15px; margin:0px 0px 15px; background-..
프론트엔드 개발, 뭐하는 직종이야? "프론트엔드(Front-End) 개발이란, 웹이나 앱을 사용하는 유저가 눈으로 보는 모든 화면의 요소들을 개발한다." 프론트엔드 개발의 사전적 수행 직무는, 백엔드(Back-End) API (Application Programming Interface)에서 가져온 데이터의 출력, 입력을 통한 비지니스 로직 구성과 유저가 사용하는 유저 인터페이스를 개발한다. 실무에서 경험한 수행 직무는, 백엔드 개발자가 건네주는 API 문서 혹은 API 정보를 공유 받아 서버에서 제공해주는 데이터를 가져와서 화면에 나타나게 해주는 것이 기본이며, 서비스를 사용하는 흐름에 따라 데이터를 가공하거나 선별하여 해당 단계에서 필요한 데이터만 유저가 볼 수 있도록 한다. 1. 프론트엔드 개발자가 되려면? 프론트엔드 개발자를 목표로..
[웹 퍼블리셔 성장기 1편] 웹 퍼블리셔, 뭐하는 직종이야? "웹 퍼블리셔(Web Publisher)란, 디자인된 페이지를 웹 화면으로 구현하며,HTML, CSS, JavaScript를 기본 소양으로 가지고 있어야 한다." 웹 퍼블리셔의 사전적 수행 직무는,웹디자이너, 웹프로그래머, 웹기획자 등과 웹사이트의 제작 및 진행방향 등에 대해 협의하고 조언한다. 웹디자이너 또는 HTML 코딩원에 의해 코딩된 작업물을 ¹웹 표준, ²웹 접근성, ³크로스 브라우징, ⁴시멘틱 마크업 원칙에 맞추어 코딩한다. 작업 결과물을 웹프로그래머, 웹기획자 등에게 전달한다. 운영 중인 웹사이트를 점검하여 웹 표준, 웹 접근성 등에 부합하는지 검토하기도 한다. 출처: 고용노동부 한국 고용정보원 워크넷 실무에서 경험한 수행 직무는,기획서를 보고 구현 가능 여부를 판단하고, 디자이너의 디자인을..
CSS (Cascading Style Sheets) 란? 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 'CSS'이다.HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성 형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다.따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지·보수도 간편하게 할 수 있다.

티스토리툴바