글

Font 와 웹 폰트

이미지
글자의 모양을 조정 하기 위한 css 속성 및 웹 폰트에 대해서 파악한다. 이전에 사용하였던 html 과 css 를 그대로 이용하여 진행하도록 한다. Recap css selector를 활용하여 자신이 작업하고자 하는 요소를 찾는다. 박스 모델을 활용한 배열 - flex 를 활용한다. 박스 모델에서 사용되는 기본속성 width, height, padding, margin 를 사용한다. html 문서의 내용과 css 를 활용하여 주어진 레이아웃을 상세화 한다. Font 우선 폰트 관련 설정 사항을 보기 위하여, 메인 이미지 영역에 텍스트를 삽입 한다. <div id="main"> <p>Time is gold</p> <p>시간은 금이다.</p> </div> 생각한 대로의 결과 이기는 하지만 정리되어 보이지 않을 것이다. 여기에서 글자의 주목도를 높이기 위해 h1 요소를 사용하도록 바꾸어 보도록 한다. <div id="main"> <h1>Time is gold</h1> <h1>시간은 금이다.</h1> </div> 이제야 조금 마음에 들지만, 이번 결과 역시 딱 마음에 들지 않는 케이스가 많을 것이다. 바로 글꼴의 문제인데, 이 글꼴이 각 PC의 시스템 글꼴을 이용하여 웹 브라우저에서 내용을 표시 하기 때문이다. 웹 폰트 웹 폰트의 개요 바로 위에서 글꼴이 시스템에 설치되어 있다고 언급하였다. 따라서 각 폰트(글꼴)들은 각각의 사용자 pc에 설치 되어 있다는 의미이다. 일반적으로 폰트는 운영체제(OS - Windows등)에 따라서 미리 설치 되어 있는데, 사용자가 다른 운영체제에서 작업 된 페이지를 보게 되면 다른 글꼴이 표기 된다는 ...
댓글 쓰기
자세한 내용 보기

Top Bar 구성 - 조금더 상세한 박스모델.

이미지
이제 조금 더 상세한 설정을 위하여. 각 구성 요소를 설정해 보도록 할 것이다. 이전의 포스트에서 top 이라고 이름 지어진 부분에 조금 더 집중 해보도록 한다. Recap div 계층적 요소를 살피고, 부모 요소에 flex를 적용한다. 자식 요소의 정렬을 위하여 justify-content 속성을 사용한다. div 의 사이즈를 스타일에서 지정한다. 구상 우선 머릿속으로 또는 이전의 이미지가 떠오르지 않는다면, 이전 포스트의 이미지를 다시 한번 살펴 보도록 한다. 현재 top은 하나의 div로 구성되어 있다. 해야 할 것은 좌측 끝에 home 메뉴, 우측 끝에 sns 아이콘들이 있다. 가운데의 공백까지 포함하여 3개의 div를 구성하여 style 작업을 해야 할 것으로 생각한다. html 요소 작업 우선 기존에 작업을 진행 하고 있던 (박스 형태의 div를 이용하여 레이아웃 작업을 진행중이던) 파일에 top 부분의 요소를 수정한다. <div id="top"> <div>top left</div> <div>top center</div> <div>top right</div> </div> 부모 div의 flex 설정 및 top 아이디 밑의 div 에만 스타일을 적용하기 위한 selector 작성 #top { display: flex; } #top div { border: 1px solid black; } 두번째 선택자를 살펴보면, top 아이디를 가진 요소들 중 div html 요소에 검은색으로 외곽선을 추가하였다. 이러한 선택이 가능하므로 cascading (계단식) 스타일이라는 용어를 사용하게 된다. 또한 css이러한 용례로 인하여 html 요소들도 부모 ...
댓글 쓰기
자세한 내용 보기

CSS에서 박스 모델 배열.

이미지
css 에서 스타일을 지정할 때 스타일이 화면 상 자리를 차지하고 있는 것을 하나의 박스로 둘러싸고, 이것을 이용하여 배열을 하는 것을 박스 모델 배열이라고 한다. Recap 스타일 요소를 html 에 포함한다. 기본 작성 규칙 선택자를 이용하여 요소, id, class를 이용한 스타일 적용 객체를 선택한다. 배경색, 외각선, 폭과 높이의 스타일 지정 할 수 있다. RGB 값을 이용하여 색상을 숫자로 표현한다. flex 모델 부모 요소에 flex 스타일을 적용 flex 박스 모델을 사용하기 위하여 부모 요소에서 flex 스타일을 지정한다. 우선 flex 모델에 대하여 살펴 보기 위하여 다른 속성들은 설정하지 않고 살펴보도록 한다. <!DOCTYPE html> <html> <head> <title>TITLE</title> <style> body { background-color: #ccc; margin-top: 30px; } #top { background-color: white; border: none; } .rect { border: 1px solid black; width: 250px; height: 250px; } #rec_container { display: flex; } </style> </head> <body> <div id=...
댓글 쓰기
자세한 내용 보기

CSS 의 간략한 설명.

이미지
css란 cascading style sheets의 줄임말로서 스타일시트라고 말하기도 한다. 계단식(cascading:캐스케이딩)이라고 표시된 이유는 앞선 포스트에서 잠시 언급하였던 수직적인 구조화를 나타내기 때문에 붙은 것으로, html 의 요소에 디자인적(표시상) 디테일하고 다양한 제어를 하기 위하여 별도의 문법적인 구조를 가진 문서이다. Recap div를 이용하여 html 문서를 구조화 한다. div를 계층적으로 이용하여 부모 자식 구조를 만든다. div 요소 안에 style 속성을 이용하여 해당 요소의 스타일을 제어 한다. div 요소를 구분하기 위하여 id 와 class 속성을 사용한다. 앞으로 태그라는 용어 대신 요소(element:엘레멘트)를 사용한다. 요소가 보다 알맞은 용어이다. style 요소 css는 여러 방식 중 하나로서 html 문서안에 위치할 수 있다. 브라우저 또는 해석기에 따라 차이는 있지만 2023년 현재 대부분의 브라우저에서는 어느 위치에 style 요소가 존재 하여도 적용이 되지만, 일반적으로 head 요소의 자식 요소로 사용한다. <!DOCTYPE html> <html> <head> <title>TITLE</title> <style> body { background-color: ghostwhite; } </style> </head> <body> <div id="top" style="border: 3px solid red; height:30">top</div> <div id="logo" style="border:...
댓글 쓰기
자세한 내용 보기

페이지 레이아웃을 위한 준비

이미지
이제까지 html 파일을 작성하면서 연습용 파일을 이용하였지만, 실제 업무 또는 결과물을 위해서는 페이지 또는 사이트의 기획 부터 시작 하는 것이 맞을 것이다. 현재는 기획은 없지만, 일반적인 회사에서 많이 사용하는 페이지의 구조를 생각하여 참조할 레이아웃을 찾아보았다.   이 페이지를 각각의 구성요소로 분해하고, 이를 배치 하는 것을 레이아웃 이라고 한다. 위의 샘플 이미지를 이용하여 레이아웃을 잡아보면 각 개인마다 다른 의견들이 있겠지만 대부분 아래와 같을것이다.   Recap 표 표시 하기 - table, tr, td 태그 표의 속성 조정하기 - width, height 표의 각 칸 (cell) 의 속성 조정하기. 내용을 구조화 한다. - div 우선 "구조화 한다" 라는 단어가 생소할 듯 하다. 구조화란 "어떠한 대상을 비슷한 성질의 것으로 분류하고 그 분류를 차곡차곡 정리하여 조직적으로 쌓아 올린다." 라는 뜻이다. 이전의 포스트에서 테이블을 이용하여 사각형을 표시할 수 있게 되었으며, 위의 이미지를 보면 사각형의 모음으로 내용을 구조화 시킨 것을 살펴 볼 수 있다. 하지만 표를 이용하여 구조화된 페이지를 구성하게 되면 전체 페지가 표 하나와 같은 형태를 지니게 된다. 즉 html 문서 자체가 표가 되어 버리는 상황이 된다. 이것은 검색엔진이나 그림의 형태가 중요하지 않은 서비스에서 큰 장애가 된다. 따라서 이러한 구조화된 형태를 만들기 위하여 div 태그가 존재 한다. div 태그는 그 자체로는 내용에 영향을 미치지 않는다. <!DOCTYPE html> <html> <head> <title>TITLE</title> </head> <body> <div>top</div> <div>logo</div...
댓글 쓰기
자세한 내용 보기

HTML 문서에서 표 그리기

이미지
다음 포스트에서 더 이야기 하겠지만 표를 그리는 태그는 근래에 들어 쓰면 안되는 태그로 오해를 많이 받고 있다. 하지만 표로 나타낼 수 있는 컨텐츠가 많다는 점과, 문서의 형태를 표현하다가 표와 같은 형태의 내용도 html 에서 다룰 수 있음을 알아 보도록 한다. Recap url의 정의 url 구조 파일명으로 링크 디렉터리와 파일명으로 링크 웹주소를 통한 링크 웹과 서버, 클라이언트 테이블과 행, 열 - table, tr, td 대부분 알다시피 테이블은 행(가로줄)과 열(세로줄)로 이루어져 있다. 태그의 부모 관계를 (띄어 쓰기를 통해서 html 이 body 태그를 품고 있는것처럼) 이용하여 table > tr > td (표 > 줄 > 칸) 의 순서로 태그를 작성하고 td(칸) 태그 안에 내용을 삽입한다. <!DOCTYPE html> <html> <body> <h1>테이블 테스트</h1> <table> <tr> <td>1-1</td> <td>1-2</td> <td>1-3</td> <td>1-4</td> </tr> <tr> <td>2-1</td> <td>2-2</td> <td>2-3</td> <td>2-4</td> </tr> <tr> ...
댓글 쓰기
자세한 내용 보기

URL이란.

이전 포스트에서 다른 웹문서로 이동하기 위하여 href 속성을 URL 형식으로 작성한다고 하였다. URL의 개념은 중요한 부분이기 때문에 이번 포스트에서 어떤 개념인지 조금 살펴보고 진행 하도록 하겠다. Recap img 태그를 이용하여 이미지 표시 img 태그의 height, width 속성을 이용하여 이미지 크기 조정. img 태그의 alt 속성을 이용하여 정보유지. a 태그의 href 속성을 이용하여 링크 a 태그의 target 속성을 이용하여 링크 페이지가 뜨는 위치 조정. URL 정의 굳이 약자와 정의를 알아야 하나 싶겠지만, 어떤 의미의 약자인지 알아 두는 것이 기억에 오래 남고, 언제 어떤 방식으로 쓰일지 상상이 되기 때문에 왠만하면 알아두는 것을 추천한다. URL 은 Universial Resource Location 의 약자로서 인터넷 초창기 네트워크 상에 흩어져 있는 정보(자원)가 어디 있는지 표현하기 위하여 규정되었다. 여기에서 규정 되었다 라고 하는 것은 이것이 어떤 문제를 해결하기 위한 정답이 아니라 규칙으로 정했다는 의미이다. 웹의 세계에서는 이러한 표준에 대한 이야기가 앞으로 많이 될 수 있으므로, 규칙 즉 사람들 사이에서 정한것으로 이해하는 것이 어떤 표준이 비효율적인데 왜 사용하느냐 등의 질문에서 쉽게 빠져 나올수 있을것이다. 모양새 일반적으로 url의 모양새는 아래와 같다. 모양새부터 보고 알아볼 예제와 같이 생략이 가능하므로 유의해야 한다.   프로토콜 :// 호스트명 . 도메인명 : 포트번호 / 디렉터리 / 파일명 ? 옵션 https :// www . google.com : 80 / root / index.html ? p=1   위의 URL은 실제로는 없는 URL이지만 간략히 그 구조를 살펴보겠다. 프로토콜 : 통신을 하는 규격을 의미 웹에서는 일반적으로 https 와 http를 사용한다. 호스트...
댓글 쓰기
자세한 내용 보기