티스토리

뉴데이

검색하기

블로그 홈

뉴데이

todayisanewday.tistory.com/m

상하이 사는 직장인입니다

구독자: 0

방명록 방문하기

주요 글 목록

비전공자를 위한 HTML/CSS-미디어 쿼리 미디어쿼리 소개 미디어퀴리(Media Queries)는 각 미디어 매체에 따라 다른 스타일(css style)을 적용할 수 있게 만드는 것입니다. 미디어 매체는 모니터와 같은 스크린 매체, 프린트, 스크린 리더기와 같은 것들을 이야기 합니다. 미디어쿼리는 동일한 웹 페이지를 다양한 환경의 사용자들에게 최적화된 경험을 제공할 수 있게 해줍니다. 미디어쿼리는 CSS2의 미디어 타입(Media Types)을 확장해서 만들어졌습니다. 미디어타입은 이론적으로는 훌륭했지만, 결과적으로 제대로 활용되지 못했습니다. 이유는 당시에는 미디어 타입을 제대로 지원하는 기기가 없었기 때문입니다. 미디어 쿼리가 등장하기 이전에는 제대로 된 반응형 웹 사이트를 제작할 수는 없었습니다. 하지만 당시에는 사용자들의 환경이 아주 제한.. 공감수 0 댓글수 0 2022. 5. 7.
비전공자를 위한 HTML/CSS-레이아웃2 clear 속성 요소를 floating 된 요소의 영향에서 벗어나게 하는 속성입니다. 기본 값 : none clear: none | left | right | both | initial | inherit; none 양쪽으로 floating 요소를 허용(기본값) left 왼쪽으로 floating 요소를 허용하지 않음 right 오른쪽으로 floating 요소를 허용하지 않음 both 양쪽으로 floating 요소를 허용하지 않음 block-level 요소만 적용 가능 코드실습 clear: none float:left; 내용 맘대로 내용 맘대로 내용 맘대로 내용 맘대로내용 맘대로 내용 맘대로 내용 맘대로 내용 맘대로내용 맘대로 내용 맘대로 내용 맘대로 내용 맘대로내용 맘대로 내용 맘대로 내용 맘대로 내용 맘.. 공감수 0 댓글수 0 2022. 5. 6.
비전공자를 위한 HTML/CSS-레이아웃1 display 속성 요소의 렌더링 박스 유형을 결정하는 속성입니다. 기본 값 : - (요소마다 다름) display: value; none 요소가 렌더링 되지 않음 inline inline level 요소처럼 렌더링 block block level 요소처럼 렌더링 inline-block inline level 요소처럼 렌더링(배치)되지만 block level의 성질을 가짐 * height 나 width 등과 같은 박스모델 속성을 적용할 수 있다 그외에 list-item, flex, inline-flex, table, table-cell 등 다양한 속성 값 존재 inline level 요소 사이의 공백과 개행 처리 inline 요소의 경우 공백과 개행에 대해서 하나의 여백으로 받아들입니다. 따라서 inli.. 공감수 0 댓글수 0 2022. 5. 6.
비전공자를 위한 HTML/CSS-폰트,텍스트3 text-align 속성 텍스트의 정렬을 지정하는 속성입니다. 기본 값 : left (Right to Left 언어일 경우는 right) text-align: left | right | center | justify | initial | inherit ; 기본 값은 left이지만 경우에 따라 다릅니다. 문서의 방향이 LTR(Left To Right) 왼쪽에서 오른쪽 방향인 언어일 경우 left가 기본값이고, RTL(Right To Left) 로 오른쪽에서 왼쪽으로 읽힐 경우 right가 기본값이 됩니다. left 텍스트를 왼쪽으로 정렬 right 텍스트를 오른쪽으로 정렬 center 텍스트를 중앙으로 정렬 justify 텍스트를 라인 양쪽 끝으로 붙여서 정렬. (마지막 라인은 정렬 하지 않음) text-.. 공감수 0 댓글수 0 2022. 5. 5.
비전공자를 위한 HTML/CSS-폰트,텍스트2 font-style 속성 글꼴의 스타일을 지정하는 속성입니다. 기본 값 : normal font-style: normal | italic | oblique | initial | inherit; normal font-family 내에 분류된 기본 값 italic italic 스타일로 표현합니다. oblique oblique 스타일로 표현합니다. oblique 텍스트의 기울기에 대한 각도를 추가로 지정할 수 있습니다. font-weight oblique ; 유효한 값은 -90 ~ 90도이며, 따로 각도를 지정하지 않으면 14도가 사용됩니다. 양수 값은 글의 끝 부분 쪽으로 기울어지며, 음수값은 시작 부분 쪽으로 기울어집니다. 그러나 아직 초안 단계로 CSS Fonts Module Level 4를 지원하는 브.. 공감수 0 댓글수 0 2022. 5. 5.
비전공자를 위한 HTML/CSS-폰트,텍스트 1 타이포그래피의 구조 폰트를 이해하기 위해서는 타이포그래피의 구조를 먼저 이해해야 합니다. 모든 폰트는 em박스를 가지고 있고 위 그림과 같은 구조로 이루어져 있습니다. •em 폰트의 전체 높이를 의미합니다. •ex ( = x-height ) 해당 폰트의 영문 소문자 x의 높이를 의미합니다. •Baseline 소문자 x를 기준으로 하단의 라인을 의미합니다. •Descender 소문자에서 baseline 아래로 쳐지는 영역을 의미합니다. 서체에 따라 descender의 길이가 다릅니다. ( g, j, p, q, y ) •Ascender 소문자 x의 상단 라인 위로 넘어가는 영역을 의미합니다. ( b, d, h, l ) 생각해보기 타이포그래피 구조에는 위에서 설명한 5가지 외에도 세부적으로 다양한 용어가 있습.. 공감수 0 댓글수 0 2022. 5. 5.
비전공자를 위한 HTML/CSS-height height 속성 기본 값 : 0 auto 브라우저 자동으로 계산하여 적용합니다. * 기본적으로 컨텐츠 영역의 내용만큼 높이를 가집니다. length 고정값으로 지정합니다. (ex. px, em ....) percent 부모 요소의 height에 상대적인 크기를 지정합니다. * 단, 부모 요소가 명시적으로 height 값이 있어야 합니다. height는 content 영역의 높이를 제어할 때 사용하는데 이때 auto가 아닌 특정한 값을 지정하여 사용하면, width 속성과 마찬가지로 box model 영역에서 margin 영역을 제외한 모든 영역에 대해 영향을 받습니다. 예를 들어, box .box { width: 100px; height: 100px; padding: 10px; border: 15px .. 공감수 0 댓글수 0 2022. 5. 4.
비전공자를 위한 HTML/CSS-width 요소의 가로 크기를 지정하는 width 속성은 인라인 레벨 요소를 제외한 모든 요소에 적용됩니다. 블록&인라인 강의에서 다룬 블록 레벨 요소와 인라인 레벨 요소의 특징을 되짚어보시기 바랍니다. width 속성 기본 값 : 0 auto 브라우저에 의해 자동으로 계산하여 적용합니다. * 요소의 레벨 기본 특성에 따라 다르게 동작합니다. length 고정값으로 지정합니다. (ex. px, em ....) percent 부모 요소의 width에 상대적인 크기를 지정합니다. width는 content 영역의 너비를 제어할 때 사용하는데 이때 auto가 아닌 특정한 값을 지정하여 사용하면, 그 크기는 box model 영역에서 margin 영역을 제외한 모든 영역에 대해 영향을 받습니다. (content, padd.. 공감수 0 댓글수 0 2022. 5. 4.
비전공자를 위한 HTML/CSS-margin&padding margin과 padding의 비교 + - auto 단위 margin o o o px, % ... padding o x x px, % ... 음수값 사용 가능 여부! 왜 margin은 음수 값 적용이 가능하고, padding은 적용되지 않을까요? 예를 들어 생각해보자면, padding은 뼈와 우리 피부 사이의 지방이라고 생각하고, margin은 사람과 사람 사이의 간격이라고 생각하면 쉽습니다. 지방은 아무리 뺀다고 해서 피부가 뼈보다 밑으로 갈 수 없을 뿐만 아니라, 0 이하가 될 수 없으므로 양수만 된다고 생각하면 됩니다. 그러나 사람과 사람 사이는 멀리 떨어질 수도 있지만, 서로 겹쳐서 서 있을 수도 있으므로 음수 값이 가능하다고 생각하면 됩니다. %값의 사용과 기준점 css 속성을 사용하면서 어떤 .. 공감수 0 댓글수 0 2022. 5. 4.
비전공자를 위한 HTML/CSS-margin margin 속성 기본 값 : 0 length 고정값으로 지정합니다. (ex. px, em ....) percent 요소의 width에 상대적인 크기를 지정합니다. auto 브라우저에 의해 계산된 값이 적용 됩니다. margin-top border 영역의 위쪽 여백을 지정합니다. margin-right border 영역의 오른쪽 여백을 지정합니다. margin-bottom border 영역의 아래쪽 여백을 지정합니다. margin-left border 영역의 왼쪽 여백을 지정합니다. syntax margin: [-top] [-right] [-bottom] [-left]; 0 10px 20px 30px /* 상, 우, 하, 좌 다름 */ 0 10px 20px /* 좌, 우 같음 */ 0 10px /* 상,.. 공감수 0 댓글수 0 2022. 5. 4.
비전공자를 위한 HTML/CSS-padding padding 속성 기본 값 : 0 length 고정값으로 지정합니다. (ex. px, em ....) percent 요소의 width에 상대적인 크기를 지정합니다. padding-top content 영역의 위쪽 여백을 지정합니다. padding-right content 영역의 오른쪽 여백을 지정합니다. padding-bottom content 영역의 아래쪽 여백을 지정합니다. padding-left content 영역의 왼쪽 여백을 지정합니다. syntax padding: [-top] [-right] [-bottom] [-left]; 0 10px 20px 30px /* 상, 우, 하, 좌 다름 */ 0 10px 20px /* 좌, 우 같음 */ 0 10px /* 상, 하 같음 & 좌, 우 같음 */ .. 공감수 0 댓글수 0 2022. 5. 4.
비전공자를 위한 HTML/CSS-border border 관련 속성 border-width 기본 값 : medium 선의 굵기를 지정하는 속성입니다. border-top-width, border-bottom-width, border-right-width, border-left-width를 이용하여 상하좌우 선의 굵기를 다르게 표현할 수 있습니다. border-width: [top] [right] [bottom] [left]; 키워드 thin, medium, thick 단위 px, em, rem ... ( % , 정수 단위 사용불가 ) border-style 기본 값 : none 선의 모양을 지정하는 속성입니다. border-top-style, border-bottom-style, border-right-style, border-left-style을.. 공감수 0 댓글수 0 2022. 5. 4.
비전공자를 위한 HTML/CSS-boxmodel 문서를 배치할 때 브라우저의 렌더링 엔진은 표준 CSS 기본 박스 모델에 따라 각 요소를 사각형 상자로 나타냅니다 . CSS를 이용해 이 상자의 크기, 위치 및 속성(색상, 배경, 테두리 크기 등)을 변경할 수 있습니다. boxmodel 구성 Content 영역 요소의 실제 내용을 포함하는 영역입니다. 따라서 크기는 내용의 너비 및 높이를 나타냅니다. Border 영역 content 영역을 감싸는 테두리 선을 border라고 합니다. Padding 영역 content 영역과 테두리 사이의 여백을 padding이라고 합니다. content 영역이 배경, 색 또는 이미지가 있을 때 패딩 영역까지 영향을 미칩니다. 이에 따라 padding을 content의 연장으로 볼 수도 있습니다. Margin 영역 bor.. 공감수 0 댓글수 0 2022. 5. 4.
비전공자를 위한 HTML/CSS-background background 관련 속성 background-color 기본 값 : transparent 배경의 색상을 지정하는 속성입니다. 앞선 색상 강의에서 배운 색상 값 적용 방식과 같습니다. background-image 기본 값 : none 배경으로 사용할 이미지의 경로를 지정하는 속성입니다. url의 경로는 절대 경로, 상대 경로 모두 사용 가능합니다. 만약 background-color에 색상이 적용된 상태에서 background-image로 사용된 이미지에 투명한 부분이 있다면, 그 부분에 background-color 색상이 노출됩니다. background- repeat 기본 값 : repeat 이미지의 반복 여부와 방향을 지정하는 속성입니다. 기본값이 repeat이기 때문에 따로 설정하지 않으면 .. 공감수 0 댓글수 0 2022. 5. 4.
비전공자를 위한 HTML/CSS-속성&색상 Color 속성 폰트의 색상 값을 적용할 때 사용하는 속성입니다. h1 { color: 색상 값;} 색상 값 지정 방식 컬러 키워드 CSS 자체에서 사용 가능한 문자 식별자입니다. red, blue, black 등과 같이 미리 정의되어있는 키워드를 이용해 색상을 표현할 수 있습니다. * 참고 : transparent는 투명을 나타내는 키워드 * 16 진법 ex. #RRGGBB 6자리의 16진수(0-9, A-F)는 각각 두 자리씩 세 가지 색상을 나타냅니다. 첫 번째 두 자리는 적색(RR), 가운데 두 자리는 녹색(GG), 마지막 두 자리는 청색(BB)을 의미합니다. 각 자리의 알파벳은 대소문자를 구분하지 않습니다. 16 진법 ex. #RGB 6자리의 16진수에서 각각의 두 자리가 같은 값을 가지면 3자리.. 공감수 0 댓글수 0 2022. 5. 4.
비전공자를 위한 HTML/CSS-단위 단위는 크게 절대 길이 단위와 상대 길이 단위로 구분되어 집니다. 절대 길이 절대 길이는 고정된 크기 단위로, 다른 요소의 크기에 의해 영향을 받지 않습니다. px ( 1px = 1/96th of 1 inch ) 절대 길이이므로 다른 요소의 영향을 받지 않아 화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적입니다. 여러 환경에서 디자인을 같게 표현하고 브라우저 호환성에 유리한 구조로 되어 있어서, 디자인 의도가 많이 반영된 웹사이트의 경우 픽셀 단위를 사용하는 것을 권장하고 있습니다. pt ( 1pt - 1/72 of 1 inch ) 컴퓨터가 없던 시절부터 있던 단위입니다. 인쇄물이나 워드프로세서 프로그램에서 사용된 가장 작은 표준 인쇄단위입니다. 웹 화면에 인쇄용 문서를 위한 스타일을 적용.. 공감수 0 댓글수 0 2022. 5. 4.
비전공자를 위한 HTML/CSS- 속성 정의와 구문 CSS Reference를 통해 확인 가능한 사항들은 다음과 같습니다. 정의 해당 속성이 어떤 변화를 일으키고 어떻게 동작하는지 파악할 수 있습니다. 기본 값 상속 여부 애니메이션 가능 여부 사용 가능한 CSS버전 문법 해당 속성값을 어떤 식으로 나열하여 사용하는지를 파악할 수 있습니다. 속성 값 해당 속성이 인식하여 적용할 수 있는 값의 형태나, 키워드 등을 파악할 수 있습니다. Initial : 초기값, 즉 속성의 기본값으로 정의 (ie에서 지원하지 않음) Inherit : 부모 요소의 해당 속성 값을 적용 (상속 가능할 요소일 경우) 즉, 상속이 불가능한 속성일 경우에는 적용 되지 않습니다. 지원 범위 해당 속성이 정의에 맞게 동작 가능한 CSS 버전, 브라우저별 버전을 확인할 수 있습니다. 어떤 .. 공감수 0 댓글수 0 2022. 5. 4.
비전공자를 위한 HTML/CSS-캐스케이딩 앞서 배운 구체성은 cascading 규칙 중 하나입니다. 만약 구체성이 같은 두 규칙이 동일한 요소에 적용된다면 어떻게 될까요? h1 { color: red; } h1 { color: blue; } 위 에는 같은 구체성을 가진 두 규칙이 적용되었습니다. 그렇다면 에는 어떤 color가 적용될까요? 에는 color: blue가 적용되며 이는 cascading 규칙에 의해 적용된 결과입니다. cascading 규칙 cascading에는 다음과 같이 3가지 규칙이 있습니다. 중요도(!important)와 출처 구체성 선언 순서 위에서의 출처는 CSS 출처를 의미합니다. CSS 출처는 제작자와 사용자, 그리고 사용자 에이전트(user agent) 경우로 구분합니다. 제작자의 경우는 사이트를 실제 제작하는 개발.. 공감수 0 댓글수 0 2022. 5. 3.
비전공자를 위한 HTML/CSS-상속 상속되는 속성 h1 { color: gray; } Hello, CSS 위 코드에서 은 부모인 의 color: gray를 상속받습니다. 상속은 자연스러운 현상처럼 보이지만, 모든 속성이 다 상속되는 것은 아닙니다. 아직 속성에 대해 다 배우지는 않았지만, margin, padding, background, border 등 박스 모델 속성들은 상속되지 않는다는 것을 알고 계시면 됩니다. 상속되는 속성들은 보통 상식적으로 구분될만한 속성들이며, 후에 속성들에 대해 배우게 되면 자연스럽게 이해할 수 있습니다. 상속되는 속성의 구체성 * { color: red; } h1#page { color: gray; } Hello, CSS 위 코드에서는 전체 선택자를 이용해 color: red를 적용하고 id 선택자를 이용.. 공감수 0 댓글수 0 2022. 5. 3.
비전공자를 위한 HTML/CSS-구체성 구체성 요소를 선택하는 데는 여러 방법이 있습니다. 따라서 서로 다른 선택자를 이용해 같은 요소를 선택할 수도 있습니다. 만약 같은 요소를 선택하는 서로 다른 규칙들이 상반된 스타일을 가지고 있다면 어떻게 표현이 될까요? h1 { color: red; } body h1 { color: green; } 두 규칙은 모두 을 선택하게 됩니다. 하지만 두 규칙이 지정하는 스타일은 서로 다릅니다. 그렇다면 은 어떻게 표현이 될까요? 에는 color: green이 적용되는데 이는 구체성과 연관이 있습니다. 선택자에는 어떤 규칙이 우선으로 적용되어야 하는지에 대해 정해진 규칙이 있습니다. 이 규칙을 '구체성'이라고 합니다. 구체성은 선택자를 얼마나 명시적으로(구체적으로) 선언했느냐를 수치화한 것으로, 구체성의 값이 .. 공감수 0 댓글수 0 2022. 5. 3.
비전공자를 위한 HTML/CSS-가상 선택자 2 가상 요소(pseudo element) 가상 요소는 HTML 코드에 존재하지 않는 구조 요소에 스타일을 부여할 수가 있습니다. 가상 요소도 가상 클래스처럼 문서 내에 보이지 않지만, 미리 정의한 위치에 삽입되도록 약속이 되어있습니다. 선언 방법은 가상 클래스와 같게 콜론을 사용하며, CSS3부터는 가상 클래스와 가상 요소를 구분하기 위해 가상 요소에는 ::(더블 콜론) 기호를 사용하기로 했습니다. 하지만 하위 브라우저에서 :: 문법을 지원하지 않는 문제가 있으므로 상황에 따라 : 기호를 사용하셔야 합니다. ::pseudo-element { property: value; } 강의에서는 가상 클래스와 마찬가지로 기본적인 가상 요소만 설명해 드리고 마치도록 하겠습니다. 다른 가상 요소들에 대한 자세한 내용은 .. 공감수 0 댓글수 0 2022. 5. 3.
비전공자를 위한 HTML/CSS-가상선택자 가상 클래스(pseudo class) 가상 클래스는 미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스입니다. 우리가 직접 요소에 클래스를 선언하는 것은 아니고, 약속된 상황이 되면 브라우저 스스로 클래스를 적용해줍니다. 예를 들어, 가 있다고 가정하겠습니다. 이 에 마우스 커서를 올렸을 때만 특정 스타일을 주고 싶다고 한다면 어떻게 해야 할까요? 가상 클래스가 없다면 이런 과정을 거치게 됩니다. 임의의 클래스 선택자를 선언하여 특정 스타일 규칙을 만든다. p 요소에 커서가 올라가면 p 요소에 클래스를 집어넣는다. p 요소에서 커서가 빠지면 p 요소에 클래스를 삭제한다. 여기서 2, 3번은 동적으로 변화되어야 하는데, HTML과 CSS는 정적인 언어이기 때문에 처리할 수 없습니다. 어쩔 수 없이.. 공감수 0 댓글수 0 2022. 5. 3.
비전공자를 위한 HTML/CSS-문서 구조 관련 선택자 문서 구조의 이해 선택자와 문서의 관계를 이해하기 위해 먼저 어떻게 문서가 구조화되는지를 다시 한 번 살펴보겠습니다 HTML: Hyper Text Markup Language HTML과 CSS와 JAVASCRIPT를 이용해서 멋진 웹 사이트를 제작할 수 있습니다. 위 HTML 코드에서 각 요소들을 짚어가면서 부모와 자식, 조상과 자손, 그리고 형제의 관계를 살펴보겠습니다. (참고: 영상의 예제 코드와 조금 다릅니다.) 부모와 자식 부모 요소는 그 요소를 포함하는 가장 가까운 상위 요소로, 그 요소의 부모 요소는 단 하나뿐입니다. 자식 요소는 부모 요소와 반대라고 생각하면 되며 자식 요소는 여러 개일 수도 있습니다. 의 부모 요소: ↔ 의 자식 요소: 의 부모 요소: ↔ 의 자식 요소: , 의 부모 요소:.. 공감수 0 댓글수 0 2022. 5. 3.
비전공자를 위한 HTML/CSS-선택자3 선택자의 조합 /* 요소와 class의 조합 */ p.bar { ... } /* 다중 class */ .foo.bar { ... } /* id와 class의 조합 */ #foo.bar { ... } 첫 번째는 요소와 클래스를 조합한 경우입니다. 이 경우에는 이면서 class 속성에 bar가 있어야 적용됩니다. 두 번째는 다중 클래스의 경우입니다. 이 경우에는 class 속성에 foo와 bar가 모두 있어야 적용됩니다. 마지막은 id와 class를 조합한 경우입니다. 이 경우에는 id가 foo이며 class가 bar인 요소에 적용됩니다. 속성 선택자 단순 속성으로 선택 p[class] { color: silver; } p[class][id] { text-decoration: underline; } Hell.. 공감수 0 댓글수 0 2022. 5. 3.
비전공자를 위한 HTML/CSS-선택자2 class 선택자 요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 가장 일반적인 방법은 class 선택자를 활용하는 것입니다. class 선택자를 사용하기 위해서는 HTML을 수정해 class 속성을 추가해야 합니다. class 속성은 글로벌 속성이므로 어느 태그에서도 사용할 수 있습니다. class 속성에 값을 넣게 되면, class 선택자를 이용해서 해당 요소에 스타일 규칙을 적용할 수 있습니다. .foo { font-size: 30px; } ... 위 코드처럼 의 class 속성의 값으로 "foo"라는 값을 넣었다면, CSS에서 그 값("foo")을 선택자로 지정하면 됩니다. 클래스 선택자를 쓸 때는, 맨 앞에 .(마침표)를 찍어주셔야 합니다. 이렇게 되면 어느 요소든지 class 속성값이 "f.. 공감수 0 댓글수 0 2022. 5. 3.
비전공자를 위한 HTML/CSS-선택자1 요소 선택자 선택자 중에 가장 기본이 되는 선택자이며, 태그 선택자라고도 합니다. h1 { color: yellow; } h2 { color: yellow; } h3 { color: yellow; } h4 { color: yellow; } h5 { color: yellow; } h6 { color: yellow; } 요소 선택자는 위 코드처럼 선택자 부분에 태그 이름이 들어갑니다. 문서 내에 선택자에 해당하는 모든 요소에 스타일 규칙이 적용됩니다. 그룹화 선택자는 쉼표를 이용해서 그룹화를 할 수 있습니다. h1, h2, h3, h4, h5, h6 { color: yellow; } 위 코드는 요소 선택자의 예제 코드와 같은 코드입니다. 그리고 전체 선택자 라고 불리는 간단한 선택자도 있습니다. * { co.. 공감수 0 댓글수 0 2022. 5. 3.
비전공자를 위한 HTML/CSS-CSS 문법과 적용 CSS는 HTML 요소를 꾸며주는 역할을 합니다. CSS는 꾸밀 대상이 되는 요소와 그에 대한 스타일 내용으로 이루어져 있습니다. CSS 구문 h1 { color: yellow; font-size:2em; } 선택자(selector) - "h1" 속성(property) - "color" 값(value) - "yellow" 선언(declaration) - "color: yellow", "font-size: 2em" 선언부(declaration block) - "{ color: yellow; font-size:2em; }" 규칙(rule set) - "h1 { color: yellow; font-size:2em; }" CSS 파일은 여러 개의 규칙으로 이루어져 있습니다. 선택자와 선언부 사이, 선언과 선언 .. 공감수 0 댓글수 0 2022. 5. 3.
비전공자를 위한 HTML/CSS-CSS 소개 CSS와 HTML CSS는 간단히 이야기하면 HTML(마크업 언어)을 꾸며주는 표현용 언어입니다. HTML이 문서의 정보, 구조를 설계한다면 CSS는 문서를 보기 좋게 디자인합니다. CSS는 분명히 HTML과는 독립된 다른 언어지만 마크업 문서 자체가 존재하지 않으면 CSS는 무용지물이나 마찬가지입니다. 왜냐하면, CSS는 표현을 위한 언어인데 마크업 문서가 없다면 표현할 대상이 없기 때문입니다. 그래서 CSS는 보통 마크업 언어인 HTML과 같이 묶어서 이야기합니다. CSS로 표현한 다양한 웹 사이트들 전 세계에 많은 웹 사이트들이 있습니다. 그리고 그것들 모두 HTML 태그를 이용해서 만들어졌고, 자주 사용되는 태그의 개수는 10여 개밖에 되지 않습니다. 결국, 모든 사이트가 비슷한 HTML 태그를 .. 공감수 0 댓글수 0 2022. 5. 3.
비전공자를 위한 HTML/CSS-블록&인라인 블록 레벨 요소 부모 요소의 가로 영역에 맞게 꽉 채워져 표현되는 요소입니다. 양옆으로 다른 요소가 배치되지 않게 박스를 생성하므로 박스의 위아래로 줄 바꿈이 생기게 됩니다. 블록 레벨 요소는 일반적인 모든 요소(블록, 인라인 레벨 등)를 포함할 수 있습니다. " div, h1~h6, p, ul, li, table ..." 인라인 레벨 요소 하나의 라인 안에서 자신의 내용만큼의 박스를 만드는 요소입니다. 라인의 흐름을 끊지 않고 요소 앞 뒤로도 줄 바꿈이 되지 않아 다른 인라인 요소들이 자리할 수 있습니다. 인라인 레벨 요소는 블록 레벨 요소의 자식으로 분류되기 때문에 자손으로 블록 레벨 요소를 가질 수 없습니다. 즉, 인라인 레벨 요소는 블록 레벨 요소를 포함할 수 없습니다. " span, i, img.. 공감수 0 댓글수 0 2022. 5. 3.
비전공자를 위한 HTML/CSS-시멘틱 마크업 시멘틱 마크업 이란? 시멘틱 마크업은 종종 POSH(Plain Old Semantic HTML)라고도 불리는데, 단어 그대로 평범하고 오래된 의미론적인 HTML이라는 뜻입니다. 시멘틱은 즉, 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것을 뜻합니다. 애초에 프로그래밍 언어는 사람과 기계와의 정해진 약속이며 HTML 역시 마찬가지입니다. 시멘틱 마크업은 적절한 HTML 요소를 올바르게 사용하는 것에서 시작합니다. 시멘틱 마크업 하기 그럼 어떻게 하면 브라우저가 코드를 잘 이해할 수 있을까요? 간단합니다. 정해진 약속을 잘 지키면 됩니다. 구체적으로 설명하자면 마크업 할 때는 의미에 맞는 태그, 요소를 사용하는 것이고 문서를 표현할 때는 구조화를 잘 해주는 것입니다. 정해진 약속대로 코드를 작성하.. 공감수 0 댓글수 0 2022. 5. 3.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.