생각 작업실 The atelier of thinking

지금까지 CSS를 가지고 웹페이지를 어떤 식으로 디자인하는지 하나하나 어떻게 색상 부분을 조절한다든가 텍스트의 크기를 크게 하거나 작게 조절한다거나 하는 등에 대해서 살펴봤습니다. 이번회차에는 CSS의 개별적인 속성들이 실제 웹페이지로 만들어지는 과정은 어떻게 되는지, 전체적인 웹페이지의 구성은 어떻게 하는지, 그리고 개별적인 요소들이 어떻게 어우러지는지 살펴보겠습니다. 1. 웹페이지 레이아웃이란? 웹페이지의 목적은 다양하며, 각각의 웹페이지는 특정한 목표를 달성하기 위해 설계됩니다. 웹페이지는 정보제공, 상품 또는 서비스 판매, 교육, 엔터테인먼트 등 다양한 목적이 있는데, 이 목표를 달성하기 위해서는 구성을 사용자 중심의 디자인과 효율적인 정보 전달이 될 수 있도록 하여야 합니다. 출처 : GS SH..

박스모델이란 모든 HTML 요소는 상자(Box) 형태로 나타낼 수 있다는 개념입니다. 속성이라기 보다는 설명을 위한 개념입니다. 박스모델은 속성 중 border,padding, margin, width, height 등으로 설명가능합니다. HTML 요소는 아래와 같습니다. 1. border border는 태그 테두리를 그려주는 속성입니다. border-width : 테두리 두께 border-style : 테두리 모양 border-color : 테두리 색상 위 3가지 요소를 아래처럼 단축해서 사용할 수 있습니다. div { border: 1px solid darkgray;} 선택자 { border : 굵기 종류 색상 ; } 순으로 작성합니다. Box Moder Hello World! 2. width & h..

CSS에는 매우 다양한 속성이 있고 수 백가지의 속성이 있기 때문에 모두 외우고 있을 필요는 없습니다. 하지만 카테고리로 나누어 알아두면 도움이 될만한 속성들 알아보고 있습니다. 지난 회차에는 텍스트 스타일 표현에 관련된 속성들을 알아봤습니다. 이번 회차에는 색상 표현 방법 관련한 내용들을 알아보고자 합니다. 색상 표현방법은 CSS 뿐만 아니라 다른 대부분의 프로그래밍 언어에서 거의 똑같은 방식으로 적용됩니다. 1. 색상관련 대표적인 속성 CSS에서 색상 관련 대표적인 속성들은 아래와 같습니다. (1) color 텍스트의 색상을 정의합니다. p { color : blue ; } (2) background-color HTML 태그의 배경색을 설정합니다. p { background-color : #87cee..

앞서 CSS 선택자(Selector)를 이용하여 HTML 웹페이지에서 원하는 위치를 찾았다면, 이제 그 부분을 내가 원하는 스타일로 꾸미려면 어떻게 해야할 것이라는 대답은 속성과 속성값을 이용해야 한다는 것입니다. "원하는 스타일 지정을 위해서 어떤 속성과 어떤 값이 필요할까?" 라는 질문에 대한 답을 찾아가는 것이라 할 수 있습니다. CSS는 매우 다양한 속성이 있고 수 백가지의 속성이 있기 때문에 그것을 전부 외우고 있을 필요는 없습니다. 필요할 때 검색해서 찾아서 사용하면 됩니다. 하지만, 자주 쓰는 것에 대해서는 미리 알아두면 코딩 시간을 많이 줄일 수 있습니다. 카테고리로 나누어 알아두면 도움이 될만한 속성들을 알아보고자 합니다. 이번 회차에는 텍스트 스타일 표현 속성과 속성값들에 대해 알아보려..

1. 요소(Element) 관련 자료들을 검색하다보면 HTML 요소 혹은 HTML 엘리먼트라는 말을 접하게 됩니다. HTML요소(Element)는 간단히 정의하면 태그(Tag)와 내용(Content)으로 이루어진 것을 말합니다. 이 Element 중에 웹페이지에 보이는 부분은 내용(Content) 부분입니다. 태그는 이 요소가 HTML임을 알려주는 역할을 합니다. 2. 선택자(Selector) 선택자(Selector)는 HTML 태그의 모양을 꾸밀 스타일 시트를 선택하는 기능을 합니다. 여러 유형의 선택자가 있습니다. 간단한 예를 들어 알아보겠습니다. (1) 태그 이름 선택자(selector) 태그 이름이 로 사용되는 유형입니다. 선택자와 같은 이름의 모든 태그에 CSS 스타일 시트가 적용됩니다. Web..

지금까지 태그를 이용하여 웹페이지를 만들어 봤습니다. 텍스트관련 태그, 태그, 태그, 태그 등을 이용해서 웹페이지를 작성할 수 있습니다. 하지만, 태그만으로는 뭔가 아쉬움이 있습니다. 웹페이지를 보다 풍성하게 꾸미기 위해서는 CSS의 도움이 필요합니다. 1. CSS의 유래 초기 웹 문서는 HTML만을 사용하여 구조를 정의했으며, 디자인이나 레이아웃과 관련된 기능은 HTML에 내장되어 있었습니다. 이로 인해 HTML 문서의 구조와 디자인이 강하게 결합되어 있었고, 웹 페이지의 디자인을 변경하려면 모든 페이지의 HTML을 수정해야 했습니다. CSS는 이러한 구조와 디자인을 분리하고자 하는 요구에 응답하기 위해 개발되었습니다. 1996년에 W3C(World Wide Web Consortium)에서 CSS Le..

HTML은 "Hypertext Markup Langage"의 약자입니다. 그 중 "Hyper Text"는 하이퍼링크(hyperlink)를 정의하여 문서의 내용과 내용을 연결한 텍스트를 말합니다. 앞서 Text 관련 태그들은 알아봤습니다. 이번 회차에는 하이퍼링크에 관련한 태그인 태그에 대해 알아보겠습니다. 1. 하이퍼링크(hyperlink)란? 하이퍼링크(hyperlink)는 웹페이지에서 한 위치에서 다른 위치로 이동할 수 있도록 하는 링크, 즉 연결고리를 의미합니다. 하이퍼링크는 주로 텍스트나 이미지 등을 클릭하면 다른 웹 페이지,문서,미디어 파일 또는 웹사이트의 특정부분으로 이동하도록 하는데 사용됩니다. 2. 태그 사용법 태그의 href 속성을 이용하여 하이퍼링크 작성합니다. 외부링크 연결하기 네이버..

지난회차에 태그를 이용하여 그림을 웹페이지에 삽입하는 것을 알아봤습니다. 이번 회차에는 웹페이지의 구성을 깔끔하게 정리할 수 있는 태그에 대해 알아보겠습니다. table, 즉 표를 만드는 태그입니다. 표 만드는데 사용되는 태그들 아래와 같습니다. : 표 전체를 담는 컨테이너 : 표 제목 : 헤딩 셀 그룹 : 바닥 셀 그룹 : 데이터 셀 그룹 : 행. 여러 , 포함 : 열 제목(헤딩) 셀 : 데이터 셀 기본적인 사용법은 아래와 같습니다. 피자 메뉴 피자 사이드디쉬 음료 클래식피자 파스타 콜라 슈프림피자 샐러드 사이다 치즈피자 치즈볼 쥬스 메뉴를 선택해 주세요 태그로 감싼 각 줄의 태그 셀의 숫자는 같게 해주어야 합니다. 셀을 합치는 속성은 열을 합칠 때는 colspan, 행을 합칠 때는 rowspan을 사..

앞서 HTML의 기본 태그와 텍스트 관련 태그에 관해서 알아봤습니다. 정리된 태그는 아래와 같습니다. 제목 단락 순서없는 리스트 순서있는 리스트 bold 글자를 진하게 글자를 진하게 emphasized 기울여서 강조 italic 이탤릭 기울이기 underline 밑줄 insert 추가하기 밑줄 하이라이팅 취소선 위첨자 : X2 아래첨자 : H2O 이번 회차에는 웹페이지에 그림이나 사진을 추가할 수 있는 태그에 대해 알아보겠습니다. 1. 이미지 태그 ( image tag ) - 그림이나 사진을 추가할 수 있는 태그는 태그입니다. 태그 사용법은 아래와 같습니다. * src : 이미지 파일의 URL, 필수 속성 * alt : 이미지가 없거나 손상되는 등 이미지를 출력할 수 없는 경우 출력되는 문자열 * wid..

지금까지의 알아보 HTML 태그를 정리하면 아래와 같습니다. Headline 1 단락 순서없는 리스트 순서있는 리스트 웹페이지 안의 텍스트를 꾸미고 싶을 때 사용할 수 있는 태그입니다. 워드프로그램을 보면, 글자 꾸미기를 위한 아래의 메뉴를 볼 수 있습니다. 글자를 진하게, 기울여서 혹은 밑줄 등을 HTML 태그로 표현할 수 있습니다. 1. 글자를 진하게 , 보통글씨 진하게 중요한 2. 글자를 기울여서 , 글씨 기울이기 기울여서 강조 이탤릭 기울이기 3. 글자에 밑줄 , 밑줄 긋기 underline 추가하기 4. 글자 강조 및 취소선 : , 강조및 취소 하이라이팅 취소선 5. 윗첨자와 아래첨자 : , X2 H2O : 물 6. 태그 중첩 사용 텍스트 꾸미기 태그들은 중첩하여 사용가능합니다. 코딩을 시작할 ..