생활코딩 (55) 썸네일형 리스트형 생활코딩 CSS_09 레이아웃 9.5 포지션(position) 9.6 Flex 9.7 미디어 쿼리(Media Query 9.8 Float 9.9 다단(multi column) 생활코딩 CSS_07 조화 7. 조화 HTML은 중첩된 구조를 갖고있어 하나의 element가 여러 효과의 영향을 받는데 효과가 우선 적용되는 규칙이 존재 상속 (Inherit) 부모 element의 효과를 자식 element가 물려받는 것 HTML의 태그들은 많은 경우 속성을 상속받는데 하위 태그에 일일히 동일한 속성을 지정해주는 것 보다 상위 태그에 속성을 지정해 주는 것이 효율적이기 떄문이다. 상속되지 않는게 효율적인 경우는 상속되지 않는다. e.g. border 속성의 상속 여부: w3 Full Property Table에서 확인 가능 Cascading 웹 페이지는 웹 브라우저 (+ HTML 내재 디자인) + 웹 페이지 및 컨텐츠 제작자의 디자인 + 사용자가 원하는 디자인으로 이루어져 있다. 이 세 가지를 조화롭게 결합하는.. 생활코딩 CSS_06 타이포그래피 6. 타이포그래피(Typography) 텍스트와 관련된 효과를 지정 Font-size 폰트의 크기를 지정하며 몇 가지 단위가 존재 단위 설명 px 절대적인 수치(고정), 사용자가 폰트 크기를 조절할 수 없음 em 크기가 가변적, 부모 태그의 영향을 받음 rem 크기가 가변적, html 태그에 적용된 font-size의 영향을 받음 사용자가 브라우저에서 폰트 사이즈를 설정할 때 px는 영향을 받지 않고 rem은 영향을 받는다. Example /* px */ #name { font-size: 16px; } /* em */ #name { font-size: 1em; } /* rem */ #name { font-size: 2rem; } Color 폰트의 색상을 지정하며 대표적으로 세 가지 방식으로 지정할 수 있.. 생활코딩 CSS_04 선택자 4. 선택자 선택자와 선언 li{ /* 색상: 빨간색 */ color: red; /* 텍스트에 적용된 효과: 없음 */ text-decoration: none; } li: 선택자. {}안의 효과를 적용할 대상을 지정한다. (e.g. li: 모든 태그에 대해 적용) color: red: 선언(declaration). 적용될 효과를 나타내며 속성(property): 값(value)의 꼴로 작성한다. e.g. color - 색상을 지정하는 속성 / red - color 속성의 값. 색상을 빨간색으로 바꾼다. ;: 세미콜론(semi-colon). 각 선언을 구분하는 구분자 (declaration separator) 역할을 한다. 줄바꿈은 영향을 미치지 않는다. 선택자의 종류 선택자는 효과를 주려는 '대상'이기 .. 생활코딩 CSS_03 HTML과 CSS가 만나는 법 03. HTML과 CSS가 만나는 법 태그의 색상을 바꾸는 두 가지 방법 태그에 직접 입력 text Style 태그 안에 입력 생활코딩 CSS_01 CSS 소개 1. CSS 소개 CSS의 등장 배경 HTML이 생긴 이후, 다양한 불만족들이 발생했고 대표적으로 사이트를 좀 더 아름답게 만들고자 하는 욕구가 있었다. 이를 위해 우선 HTML에 디자인을 위한 태그를 만들기 시작한다. Example: , 폰트를 변경하기 위한 태그. 기존에 HTML을 사용하던 사람과 브라우저가 쉽게 익숙해질 수 있다는 장점이 있다. 하지만, 웹이 활성화 되면서 HTML이 담고있는 정보는 중요해지는데 반해 와 같은 의미없는 design 태그가 많아지면서 HTML의 '정보를 담는' 코드로서 가치가 급락하게된다. 태그는 'list'라는 웹 자체에 대한 정보를 지니지만 태그는 그렇지 않기 때문에 웹을 파악하는데 도움이 되지 못한다. 결국 어렵지만 근본적인 해결책으로 디자인을 위한 새로운 언어인.. [생활코딩] CSS 강의소개 생활코딩 에서 제공하는 CSS 강의. WEB2 - CSS 수강 후 보다 구체적인 내용 학습을 위해서 듣기로 결정했다. 강의주소: https://opentutorials.org/course/2418 수강기간: 2020.02.06 - 2020.04.20 수강 소감 Web2 강의는 한덩어리로 잘 짜여진 흐름으로 핵심만 배우는 느낌이라면 클라이언트 항목의 CSS 강의는 강의 연결성은 좀 떨어지더라도 각 항목을 보다 구체적으로 확실히 배울 수 있는 강의였다. Web 2에 중복되는 내용이 많긴 하지만 Web2로 흐름을 잡고 이 강의를 들으면 보다 효과적일 것이라고 생각한다. 속성 값을 포함해서 모든 내용을 빠짐없이 다루진 않지만 웹페이지를 만드는데 무리없이 CSS를 쓸 수 있을 정도로 배운 것 같다. 강의.. 이전 1 ··· 4 5 6 7 다음