Programming/CSS (11) 썸네일형 리스트형 WEB2 CSS - 14. Recycling CSS Code 1.html/ 2.html/ 3.html에 같은 내용의 CSS를 적용했다가 만약에 변경사항이 생겨서 하나하나 바꿔줘야 하면 너무 번거로워짐 so 아예 CSS 내용을 하나의 파일로 따로 빼서 생성해놓고 변경사항을 적용해주면 한번에 바뀜. why? 로 연결돼있기 때문! youtu.be/djBrHjeitUo WEB2 CSS - 13. Using Media Query youtu.be/qe3nSIg2k3Y WEB2 CSS - 12. Introduction to Media Queries Media queries are used for the following: To conditionally apply styles with the CSS @media and @import at-rules. To target specific media for the , , , and other HTML elements with the media= attribute. To test and monitor media states using the Window. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries 반대로 @media(min-width:800px){ div{ display:none; } } 800보다 크면.. WEB2 CSS - 11. Using Grid (Chrome에서 파일 연 다음에 오른쪽 마우스 클릭하면 inspect 있음) 실제 html 내용에 값을 적용해볼 수 있음. Inspect에서는 값을 조정한다고 해서 내용에 적용되는 것이 아님. youtu.be/AL8RSY8rADY WEB2 CSS - 10. Introduction to Grid Div tag: The tag defines a division or a section in an HTML document. The tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript. The tag is easily styled by using the class or id attribute. Any sort of content can be put inside the tag! https://www.w3schools.com/tags 예시처럼 150px 돼있으면 사이즈가 고정돼있는거. fr은 조절 가능함 1fr 1fr >> 둘다 1:1 사이즈로 스크린 조절하면 둘다 사.. WEB2 CSS - 9. How to use Box Model border-bottom:3px solid gray; >> border가 아니라 border-bottom으로 해주면 테두리가 아닌 밑줄만 생성됨. margin:0; padding:20px; youtu.be/4ir8XAf7wxI WEB2 CSS - 8. Box Model Explanation of the different parts: Content - The content of the box, where text and images appear Padding - Clears an area around the content. The padding is transparent Border - A border that goes around the padding and content Margin - Clears an area outside the border. The margin is transparent https://medium.com/@Osayerieanderson/css-box-model-and-display-positioning-bf94409fafa7 youtu.be/M.. WEB2 CSS - 7. Basics of CSS Selectors Class = group으로, 하나로 묶는다 class라고 하는 저 속성의 값은 여러개의 속성이 들어올 수 있고 띄어쓰기로 구분한다 Id 선택자와 class 선택자가 같이 나오면 id 선택자가 우선 적용됨 https://www.w3schools.com/cssref/css_selectors.asp https://youtu.be/8-rCMmamtDE WEB2 CSS - 6. Learn CSS properties on your own css text size property https://www.w3schools.com/cssref/pr_font_font-size.asp h1 { font-size:45px; text-align: center; } 어차피 text-a까지만 쳐도 자동완성돼서 밑에 align고를지 다른거 고를지 나옴 center도 마찬가지. text-align: 까지 치고 나면 자동완성 옵션으로 left right center 어떤거 할지 목록 뜸. WEB2 CSS - 4. Basic grammar of CSS 웹페이지에 CSS를 적용하는 방법 스타일 태그를 쓰거나 스타일 속성을 적용한다 스타일 속성은 e.g. 예제처럼 전체가 아니라 부분적으로 다른 글자 색깔 바꾸고 싶을 때 적용 text-decoration: none >> 링크 밑줄 없애줌 효과를 적용한 다음엔 항상 끝에 ; 세미콜론 적어주기 Text-decoration:underline >> 밑줄 생성 youtu.be/h0AlL9YI6bM 이전 1 2 다음
