웹UI 1. HTML&CSS의 기초 (5) 단위, 배경, 박스모델_2 content 영역 border 영역 padding 영역 margin 영역 요소의 테두리에 관련된 속성을 지정할 때 사용한다. border-width : 선의 굵기를 지정 border-style : 선의 모양을 지정 border-color : 선의 색상을 지정 기본값 : mediun 기본값 : none 기본값 : currentColor border 축약 margin collapse(마진 병합... CSS웹UIhtmlCSS 1. HTML&CSS의 기초 (1) HTML 이해하기 단순한 텍스트를 넘어 웹 페이지의 특정 부분과 연결할 수 있는 기능을 가진 텍스트(즉, 링크) HTML은 태그들의 집합이며, 태그는 HTML에서 가장 중요하고 기본이 되는 규칙이다. <, > 기호로 표현하며, 종료 태그 앞에는 /를 붙인다. 또한, 태그는 HTML뿐만 아니라 XML, SGML, XHTML 등 다양한 마크업 언어에서 모두 사용된다. 내용을 포함한 태그 전체를 요소(Element... 웹UIhtmlhtml 2. HTML&CSS의 활용 (1) CSS 리셋 어떤 브라우저에서든 사용자들이 동일한 경험을 할 수 있도록 크로스 브라우징 원칙을 지켜서 코딩해야 한다. 리셋 CSS는 정해진 형식이나 코드가 없다. 사용하지도 않는 태그들을 초기화 할 필요도 없으며 프로젝트 성격에 맞추어 작성하면 된다. 모든 브라우저에서 동일한 뷰를 보여주기 위해 기본값을 초기화한다는 점을 기억하기! 주요 태그 및 속성 HTML 헤딩, 리스트, 폼, 테이블 등 주요 태그 ... CSS웹UIhtmlCSS 1. HTML&CSS의 기초 (6) 폰트, 텍스트_1 이름 설명 em 폰트의 전체 높이 ex ( = x-height ) 해당 폰트의 영문 소문자 x의 높이 Baseline 소문자 x를 기준으로 하단의 라인 Descender 소문자에서 baseline 아래로 쳐지는 영역 Ascender 소문자 x의 상단 라인 위로 넘어가는 영역 font-family는 상속되기 때문에 기본적으로 대표 폰트를 선언하고, 특정 폰트가 필요한 부분에서 재정의해서 사용한... CSS웹UIhtmlCSS 1. HTML&CSS의 기초 (5) 단위, 배경, 박스모델_1 절대 길이 상대 길이 px ( 1px = 1/96th of 1 inch ) 다른 요소의 영향을 받지 않아 화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적이다. pt ( 1pt - 1/72 of 1 inch ) 웹개발 시 권장하는 단위가 아니다!! 부모의 값에 대해서 백분율로 환산한 크기를 갖게 됩니다. em font-size를 기준으로 값을 환산합니다. 소수점 3자리까지 표현 ... html웹UICSSCSS 1. HTML&CSS의 기초 (3) 콘텐츠모델, 시멘틱마크업, 블록 & 인라인_2 인터넷 마케팅 방식의 한 방식으로 검색 엔진 최적화가 있다. 검색 엔진 최적화 는 HTML 코드에서 정보를 모아 검색 키워드에 맞는 적절한 웹사이트 구성하여, 검색 결과의 상위에 나올 수 있도록 하는 작업이다. 시멘틱은 즉, 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것을 뜻한다. 시멘틱 마크업은 적절한 HTML 요소를 올바르게 사용하는 것에서 시작한다. 즉, 화면에선 각각의 요소... 웹UIhtmlCSSCSS 1. HTML&CSS의 기초 (4) CSS 이해하기_3 어떤 요소에 적용된 CSS 스타일이 상충할 때 어떤 스타일을 적용할지 결정하기 위해 브라우저는 각 스타일에 구체성을 부여하고 판단하여 우선으로 적용할 것을 선택한다. 을 선택하는데 두 규칙이 지정하는 스타일은 다르다. 이 때, 선택자에는 우선순위를 정한 규칙(=구체성)이 있기 때문에 선택자의 구체성의 값에 따라 우선적으로 적용한다. 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값 0,... html웹UICSSCSS
1. HTML&CSS의 기초 (5) 단위, 배경, 박스모델_2 content 영역 border 영역 padding 영역 margin 영역 요소의 테두리에 관련된 속성을 지정할 때 사용한다. border-width : 선의 굵기를 지정 border-style : 선의 모양을 지정 border-color : 선의 색상을 지정 기본값 : mediun 기본값 : none 기본값 : currentColor border 축약 margin collapse(마진 병합... CSS웹UIhtmlCSS 1. HTML&CSS의 기초 (1) HTML 이해하기 단순한 텍스트를 넘어 웹 페이지의 특정 부분과 연결할 수 있는 기능을 가진 텍스트(즉, 링크) HTML은 태그들의 집합이며, 태그는 HTML에서 가장 중요하고 기본이 되는 규칙이다. <, > 기호로 표현하며, 종료 태그 앞에는 /를 붙인다. 또한, 태그는 HTML뿐만 아니라 XML, SGML, XHTML 등 다양한 마크업 언어에서 모두 사용된다. 내용을 포함한 태그 전체를 요소(Element... 웹UIhtmlhtml 2. HTML&CSS의 활용 (1) CSS 리셋 어떤 브라우저에서든 사용자들이 동일한 경험을 할 수 있도록 크로스 브라우징 원칙을 지켜서 코딩해야 한다. 리셋 CSS는 정해진 형식이나 코드가 없다. 사용하지도 않는 태그들을 초기화 할 필요도 없으며 프로젝트 성격에 맞추어 작성하면 된다. 모든 브라우저에서 동일한 뷰를 보여주기 위해 기본값을 초기화한다는 점을 기억하기! 주요 태그 및 속성 HTML 헤딩, 리스트, 폼, 테이블 등 주요 태그 ... CSS웹UIhtmlCSS 1. HTML&CSS의 기초 (6) 폰트, 텍스트_1 이름 설명 em 폰트의 전체 높이 ex ( = x-height ) 해당 폰트의 영문 소문자 x의 높이 Baseline 소문자 x를 기준으로 하단의 라인 Descender 소문자에서 baseline 아래로 쳐지는 영역 Ascender 소문자 x의 상단 라인 위로 넘어가는 영역 font-family는 상속되기 때문에 기본적으로 대표 폰트를 선언하고, 특정 폰트가 필요한 부분에서 재정의해서 사용한... CSS웹UIhtmlCSS 1. HTML&CSS의 기초 (5) 단위, 배경, 박스모델_1 절대 길이 상대 길이 px ( 1px = 1/96th of 1 inch ) 다른 요소의 영향을 받지 않아 화면에서 고정된 크기를 가지지만, 장치의 해상도에 따라 상대적이다. pt ( 1pt - 1/72 of 1 inch ) 웹개발 시 권장하는 단위가 아니다!! 부모의 값에 대해서 백분율로 환산한 크기를 갖게 됩니다. em font-size를 기준으로 값을 환산합니다. 소수점 3자리까지 표현 ... html웹UICSSCSS 1. HTML&CSS의 기초 (3) 콘텐츠모델, 시멘틱마크업, 블록 & 인라인_2 인터넷 마케팅 방식의 한 방식으로 검색 엔진 최적화가 있다. 검색 엔진 최적화 는 HTML 코드에서 정보를 모아 검색 키워드에 맞는 적절한 웹사이트 구성하여, 검색 결과의 상위에 나올 수 있도록 하는 작업이다. 시멘틱은 즉, 기계(컴퓨터, 브라우저)가 잘 이해할 수 있도록 하는 것을 뜻한다. 시멘틱 마크업은 적절한 HTML 요소를 올바르게 사용하는 것에서 시작한다. 즉, 화면에선 각각의 요소... 웹UIhtmlCSSCSS 1. HTML&CSS의 기초 (4) CSS 이해하기_3 어떤 요소에 적용된 CSS 스타일이 상충할 때 어떤 스타일을 적용할지 결정하기 위해 브라우저는 각 스타일에 구체성을 부여하고 판단하여 우선으로 적용할 것을 선택한다. 을 선택하는데 두 규칙이 지정하는 스타일은 다르다. 이 때, 선택자에는 우선순위를 정한 규칙(=구체성)이 있기 때문에 선택자의 구체성의 값에 따라 우선적으로 적용한다. 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값 0,... html웹UICSSCSS