코드카데미 Learn HTML & CSS: Part I

HTML PART1 코드카데미 Learn HTML & CSS: Part I 를 소개한다. HTML, CSS는 웹의 기초이니 분명히 잘알아야 한다. HTML이야 태그 몇개없으니 금방 알게되지만 CSS같은 경우 레퍼런스문서나 잘 정리된 표들고 찾아 쓰는게 일반적이다ㅋㅋ 그래서 쓰면서도 (특히 비슷한 속성값일때) 이게 뭔지 뭔차이가 있는지 모를때가 있다. 코드카데미를 풀어가면서 조금이라도 햇갈릴 여지가 있는 것들을 정리해보았다. 아그리고 이거하면 영어독해 강제로 하게된다 사실 문제푸는것보다 독해하는게 더걸리는기분 2. HTML기본 a태그: target="_blank" 를 쓰면 새 탭으로 연다 W3C 표준: 들여쓰기는 스페이스 2칸 와 태그의 차이점은 눈에 보이는 효과는 같으나 시각장애인에게 음성으로 읽어줄 때..

• format_list_bulleted CSS/CSS
• · 2021. 3. 23.
• textsms

CSS 선택자의 우선순위, 명시도 계산법, 박스 모델링

CSS를 배워보자 4. 선택자의 우선순위 CSS는 중복선언을 허용한다. 중복되는 속성이 있을경우 아래와 같은 우선순위로 처리된다. ①. 속성값 뒤에 !important 를 붙인 속성 ②. HTML에서 style을 직접 지정한 속성 ③. #id 로 지정한 속성 ④. .클래스, :추상클래스 로 지정한 속성 ⑤. 요소이름으로 지정한 속성 ⑥. 상속된 속성 같은 우선순위에 있는 경우, 나중에 선언된 것이 우선되어 적용된다. 5. 명시도 계산법 !important > id [ 100 ] > class [ 10 ] > tag [ 1 ] > * [ 0 ] ID 선택자의 갯수를 세어서 개당 100 으로 계산한다. 클래스 선택자의 갯수를 세어서 개당 10 으로 계산한다. 태그 선택자의 갯수를 세어서 개당 1 로 계산한다..

• format_list_bulleted CSS/CSS
• · 2021. 3. 23.
• textsms

CSS 선언방식, 선택자

CSS를 배워보자 1. CSS란? Cascading Style Sheets 라고하며, HTML과 같은 마크업 언어들이 실제 표시되는 방법을 기술하는 언어이다. W3C의 표준이며 레이아웃과 스타일을 정의할 때 주로 쓴다. 마크업 언어가 몸체를 이룬다면 CSS는 그것을 꾸며주는 역할을 하는 것이다. 2. 선언방식 공백은 W3C 표준에서 들여쓰기는 스페이스 2칸을 권장하고 있다. 각 선택자간에는 한줄의 여백을 권장한다. 선언방식으로는 ①. in-line: 태그안에서 속성으로 추가. ②. internal: head안에 넣어서 선언 ③. external: head안에 링크넣어서 선언 3. 선택자 보기 쉽게 표로 만들어보았다 선택자 선택자명 설명 * 전체 선택자 모든 요소를 선택한다 #id ID 선택자 id값이 같..

• format_list_bulleted CSS/CSS
• · 2021. 3. 23.
• textsms

[CSS] 선택자의 표현방법 및 종류

문자 형식 - 필수로 입력해야 합니다. @charset "utf-8"; 크기의 단위 - px : 해상도에 의존 - % : 상위태그의 비율 - em : 상위태그의 font-size x 100 - rem : 태그의 font-size x 100 기본선택자 - 태그 선택 (h1, h2, h3, a, p ... ) /* p 태그 : */ p { color: black; } - 클래스 선택 (p.green, a.big, a.small ... ) /* p 태그 이면서 class가 green 인 태그 : */ p.green { color: green; } - 아이디 선택 /* id가 content 인 태그 */ #content { background-color: orange; } - 복수 선택 /* 위 세개를 전부 선..

• format_list_bulleted CSS/CSS
• · 2021. 3. 17.
• textsms

참고할만한 프론트앤드 웹UI

스마트폰, 노트북, pc,탭 등 다양한 스마트 기기가 나오면서홈페이지 ui는 격변의 시기를 겪고 있다고 봐도 무방합니다. 현재 각종 기기에 대응하기위하여 ui자체가 반응형ui가 이제 기본으로 자리잡았습니다.개발자들이 쓰기좋은 사용자 ui 개발 엔진에대하여 살펴보죠..기본적으로 아래 있는 엔진은 무료라고 보시면될것 같습니다. 1.부트스트랩 (MIT라이센스)http://getbootstrap.com 장점: 상용디자인, 무료 디자인 템플릿 등 다양하고 화려한 ui템플릿 제공트위터에서 초기 개발한 ui라고 하던데!! 통합된 ui 환경을 만들기 좋습니다. 그냥 core만 써도 ui구성하는데는 이만한 엔진도 없습니다. bootstrap 써본사람들이 bootstrap하는지 이해가 갑니다.특히 free 템플릿, 상용템..

• format_list_bulleted CSS/bootstrap
• · 2020. 9. 24.
• textsms