공부를 합니다/웹 (Web) (24) 썸네일형 리스트형 생활코딩 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를 쓸 수 있을 정도로 배운 것 같다. 강의.. 마크다운(markdown) 사용법 1. 마크다운이란 1.1 마크다운 마크다운은 웹에서 글을 쉽게 읽고 작성하기 위해 고안된 언어(혹은 툴)로 일반 텍스트(plain text) 형태로 쓴 글을 HTML로 바꿔준다. 즉, 마크다운은 두 가지 단계로 이루어져 있다고 볼 수 있는데 (1) 일반 텍스트로 작성하여 문법(syntax)을 형성하고 (2) 형식을 갖춘 일반 텍스트를 HTML로 변환한다. 이때 Perl로 만들어진 소프트웨어 툴을 사용한다. 1.2 마크다운의 장단점 마크다운 디자인의 기본적인 목적이자 장점은 태그나 별도의 formatting instruction 없이 일반 텍스트만으로 글을 구성하여 발행 할 수 있다는 것이다. 작성 자체도 직관적이고 쉽게 할 수 있으며 HTML 등의 다른 문법에 본 내용 외의 formatting instr.. 이전 1 2 3 다음
