웹UI 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 2. HTML&CSS의 활용 (7) 이미지 목록 이미지와 함께 압축된 정보를 제공하여 콘텐츠를 미리 보여주는 역할 섬네일 주요 기능 메인, 서브 리스트에 방송 순위, 랭크/좋아요 아이콘 추가 서브 리스트는 마우스 오버 시 '나중에 보기' 버튼 노출 처리 스타일 정보 메인/서브 리스트 - 랭크 상승: 15px/#f82850, 랭크 하락: 15px/#1996ff, 랭크 유지: (텍스트 미노출) 메인 리스트 - 순위 폰트: 40px/#fff, ... CSS웹UIhtmlCSS 1. HTML&CSS의 기초 (4) CSS 이해하기_3 어떤 요소에 적용된 CSS 스타일이 상충할 때 어떤 스타일을 적용할지 결정하기 위해 브라우저는 각 스타일에 구체성을 부여하고 판단하여 우선으로 적용할 것을 선택한다. 을 선택하는데 두 규칙이 지정하는 스타일은 다르다. 이 때, 선택자에는 우선순위를 정한 규칙(=구체성)이 있기 때문에 선택자의 구체성의 값에 따라 우선적으로 적용한다. 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값 0,... html웹UICSSCSS 1. HTML&CSS의 기초 (4) CSS 이해하기_2 (1) 요소 선택자 요소 선택자는 위 코드처럼 선택자 부분에 태그 이름이 들어간다. (2) class 선택자 요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 가장 일반적인 방법은 class 선택자를 활용하는 것이다. 공백으로 구분하여 여러 개의 class 값을 넣을 수 있다. (3) id 선택자 id 선택자로 규칙을 적용할 수 있는 요소는 only 1 자식 선택자는 선택자 사이에 닫는 꺽... html웹UICSSCSS
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 2. HTML&CSS의 활용 (7) 이미지 목록 이미지와 함께 압축된 정보를 제공하여 콘텐츠를 미리 보여주는 역할 섬네일 주요 기능 메인, 서브 리스트에 방송 순위, 랭크/좋아요 아이콘 추가 서브 리스트는 마우스 오버 시 '나중에 보기' 버튼 노출 처리 스타일 정보 메인/서브 리스트 - 랭크 상승: 15px/#f82850, 랭크 하락: 15px/#1996ff, 랭크 유지: (텍스트 미노출) 메인 리스트 - 순위 폰트: 40px/#fff, ... CSS웹UIhtmlCSS 1. HTML&CSS의 기초 (4) CSS 이해하기_3 어떤 요소에 적용된 CSS 스타일이 상충할 때 어떤 스타일을 적용할지 결정하기 위해 브라우저는 각 스타일에 구체성을 부여하고 판단하여 우선으로 적용할 것을 선택한다. 을 선택하는데 두 규칙이 지정하는 스타일은 다르다. 이 때, 선택자에는 우선순위를 정한 규칙(=구체성)이 있기 때문에 선택자의 구체성의 값에 따라 우선적으로 적용한다. 0, 1, 0, 0 : 선택자에 있는 모든 id 속성값 0,... html웹UICSSCSS 1. HTML&CSS의 기초 (4) CSS 이해하기_2 (1) 요소 선택자 요소 선택자는 위 코드처럼 선택자 부분에 태그 이름이 들어간다. (2) class 선택자 요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 가장 일반적인 방법은 class 선택자를 활용하는 것이다. 공백으로 구분하여 여러 개의 class 값을 넣을 수 있다. (3) id 선택자 id 선택자로 규칙을 적용할 수 있는 요소는 only 1 자식 선택자는 선택자 사이에 닫는 꺽... html웹UICSSCSS