L0. HTML & CSS
HTML, CSS | CS50W | CS50's Web Programming with Python and JavaScript | edXHTML(Hypertext Markup Language)
- markup language that defines the structure of a web page
See the Pen
CS50-L0 by Yoonji Lim (@YoonjiLim)
on CodePen.
- The page consists of nested HTML elements: opening tag<element> & closing tag</element>
- HTML elements can include attributes: ex) lang="en": using English as our primary language
- Head element: include info that is not necessarily displayeed
- Body element: contain what is actually visible to users who visit the site
- Within the head: include a title for the webpage, which displayed in the tab at the top of the web browser
Document Object Model (DOM)
- Dom is a covenient way of visualizing the way HTML elements relate to each other using a tree-like structure.
More HTML Elements
See the Pen
CS50-L0 by Yoonji Lim (@YoonjiLim)
on CodePen.
- <h1>~<h6>: headings in <body>
- <ol>: An ordered list
- <li>: List
- <ul>: An unordered list that uses bullet points
- <img>: Images require a src attribute - path to a file on the computer or the link. -
-- alt attribute - a description in case the image can't be loaded
-- width attribute
- img tag doesn't have closing tag: bc image is just a single HTML element that can't really have anything inside of it.
- <a>: anchor tag
-- href: hyperlink reference - what page to link to
- <table>
-- <thead>: the heading of the table
--- <th>: table head
-- <tbody>: the body of the table
--- <tr>: table row
---- <td>: table data
Form
See the Pen
CS50-L0.2 by Yoonji Lim (@YoonjiLim)
on CodePen.
- <form>: allow users to enter info using an HTML form
-- type: how to input data (text, radio, dropdown menu, button..)
--- password: not display those individual characters
-- placeholder: default text
-- name: to know which input field corresponded to which value
CSS(Cascading Style Sheets)
- If move the styling from the header tag to the body tag: All of the inner elements automatically take on that style.
See the Pen
CS50-L0.4 by Yoonji Lim (@YoonjiLim)
on CodePen.
1. <style>: write which types of elements we want to be style
ex) h1 should have {color:blue; text-align:center;}
OR
2. Make "style.css" file and include that in the <head> with a link to a "style.css"file.
"style.css":
- stylesheet: describe how I want for the elements on this page to be styled
- href: hyperlink reference
Size, Font
See the Pen
CS50-L0.5 by Yoonji Lim (@YoonjiLim)
on CodePen.
- <div>: a division of the page to have some content inside of it / makes it easy to reference a particular div / break up our page into multiple different sections
- padding: 30px; : add space inside of the element / text is shows up not right up against the edge of the element
- margin: 20px; : add space around outside of the element
- font-family: Specifying what font would I like to use in order to display this text
- font-size
- font-weight
- border-collapse: collapse;: collapse all of the borders in the table
- multiple element selector(td, th): combine style table data and style table headers into one
CSS Selectors
- Element type: Styling all elements of the same type
- ID: Unique name we give to an HTML element. No two elements can have the same id, and no element can have more than one id
- Class: Can be shared by more than one element, and a single element can have more than one class.
See the Pen
CS50-L0.7 by Yoonji Lim (@YoonjiLim)
on CodePen.
- instead of h1 for selecting all of the h1 tags, say #foo to say only style the element that has an ID of foo
CSS Selectors
1. In-line styling: Adding a style equals attribute to HTML elements. Take precedence over any styling that's inside the style section of our head of the web page or inside of a separate dot CSS file.
2. id: Unique way to identify an element. If I've added style to a particular ID, that is going to be pretty highly valued in terms of how specific it is.
3. class
4. type: (the least specific)
- a,b: Multiple Element Selector
- a b: Descendant Selector
- a>b: Child Selector
- a+b: Adjacent Sibling Selector
- [a=b]: Attribute Selector
- a:b: Pseudoclass Selector
- a::b: Pseudoelement Selector
Descendant Selector
See the Pen
CS50-L0.8 by Yoonji Lim (@YoonjiLim)
on CodePen.
- If there is a 'ul' that immediately contains an 'li' within it, then I would like for that to be colored purple.
- 'ul > li' is also possible.
See the Pen
CS50-L0.9 by Yoonji Lim (@YoonjiLim)
on CodePen.
- Only anchor tags, who's href is equal to amazon.com, those should be the only ones colored red.
See the Pen
CS50-L0.10 by Yoonji Lim (@YoonjiLim)
on CodePen.
-> When I am hovering over a button, then I'd like you to change the background color to green.
- CSS pseudoclass, which provides additional styling during special circumstances. Adding a colon after our selector, and then adding the circumstance after that colon.
Responsive Design
1. Viewport: The part of the screen that is actually visible to the user
-> Add the following line in the head of the HTML files. This line tells the mobile device to use a viewport that is the same width as that of the device you're using rather than a much larger one.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2. Media Queries: The ways of changing the style of a page based on how the page is being viewed. How our page is going to look depending on how we render that particular page, or what size screen we're rendering that page on.
See the Pen
CS50-L0.11 by Yoonji Lim (@YoonjiLim)
on CodePen.
3. Flexbox: To easily have elements wrap around to the next line if they don't fit horizontally.
- Put all of our elements in a 'div(container)', Add some styling to that div specifying that we want to use a flexbox display for the elemnts inside of it.
See the Pen
CS50-L0.12 by Yoonji Lim (@YoonjiLim)
on CodePen.
- Whole container is going to be a flexbox container, and wrap around elements if you ever reach the end.
- all of the divs that inside of the container;
- grid: we can specify style attributes such as column widths and gaps between columns and rows
See the Pen
CS50-L0.13 by Yoonji Lim (@YoonjiLim)
on CodePen.
- grid-template-column: to specify how many columns there are going to be and how
wide should each of those columns be.
-- 1st: 200px, 2nd: 200px, 3rd: automatically sized: just grow or shrink to fill the screen.
Bootstrap
Bootstrap is a popular CSS library that we can use in order to use some styling that they have written.
> How to use
- getbootstrap.com
- documentation - components
- I can apply certain classes to a div and Bootstrap will handle the process of applying the right styles
- copy the CSS link that Bootstrap gives you to the top of your file.
See the Pen
CS50-L10.14 by Yoonji Lim (@YoonjiLim)
on CodePen.
- Bootstrap automatically splits a page into 12 columns
See the Pen
CS50-L0.15 by Yoonji Lim (@YoonjiLim)
on CodePen.
- Decide how many columns an element takes up by adding the class 'col-x': x=1~12
-- Have 3 columns, each of which is of width 4
--- Those columns will automatically resize to make sure they're always the appropriate size
-- 3 columns where the middle one is twice as large as the ones on either end.
- Advantage to use bootstrap: Can be mobile responsive. Can wrap around other lines if they ever need to
See the Pen
CS50-L0.16 by Yoonji Lim (@YoonjiLim)
on CodePen.
- Bootstrap allows us to specify column sizes that differ depending on the screen size.
- lg: If on a large screen, this div should take up 3 units of space
- sm: If on a small screen, each column should only take up 6 units of space, of the total 12 that I have in the row.
-> Bootstrap figure out how exactly these elements should ultimately be laid out
Sass (Syntactically Awesome Style Sheets)
Sass: A language that allows us to write CSS more efficiently in several ways, one of which is by allowing us to have variables.
- Create a new file with the extension 'filename.scss.'
- Create a new variable by adding a '$' before a name, then a colon, then a value.
- Web browsers can't understand SCSS, Sass.
- We need to compile it, from Sass into plain old CSS so that our browser is able to understand it.
- Need to install a program called Sass.
- In the terminal, in order to do this compilation, EX) sass variables.scss:variables.css (the file I would like to compile:the file I'd like to generate)
- In the terminal, EX) sass --watch variables.scss:variables.css
- Sass is going to monitor the variables.scss file.
- If ever I change the Sass file, Sass is going to know about it, it's automatically going to recompile the corresponding CSS file.
- Can nest our styling rather than use the CSS selectors.
-> :Once compiled into CSS
> Inheritance: to create a basic set of styling that can be several different elements.
- adding a '%' before a name of a class, adding some styling
- adding the line '@extend %classname' to the beginning of some styling.
See the Pen
CS50-L0.17 by Yoonji Lim (@YoonjiLim)
on CodePen.
-> Applies the styling within the 'message' class to each of the different classes below
+ 추가 조사
Sass는 CSS에 프로그래밍적 개념을 추가해 더 효율적으로 사용하기 위한 확장 언어이다.
> 주요 기능
1. 변수(Variables): '$'
- 색상, 글꼴 크기 등을 변수로 정의하여 나중에 쉽게 수정할 수 있다.
EX)$my-color: #3498db;
body{color: $my-color;}
2. 중첩 (Nesting): CSS의 구조적인 관계를 중첩으로 표현
3. Mixins: 재사용 가능한 코드 블록. 믹스인 정의 후 호출하여 해당 스타일 적용
EX)@mixin border-radius($radius){...)
.box { @include border-radius(10px);}
4. 상속 (Inheritance)
5. 연산 (Operations): 수학적 연산 사용 가능.
EX) .container {
width: 100%/3;
height: 50px + 20px;
background-color: lighten($my-color, 20%);}
6. 함수 (Functions): 다양한 함수 기본 제공, 사용자 정의 함수 작성 가능
댓글 없음:
댓글 쓰기