![[html, css, ]HTML & CSS 요약, 호스팅과 배포, git과 github, 버전관리](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fb9qVoy%2FbtsB2vhTZ1M%2FMjkOi3UMA85GFHvxtDoOsK%2Fimg.png)
오늘 수강한 강의 : 【한글자막】 100일 코딩 챌린지 - Web Development 부트캠프
HTML & CSS 요약
HTML과 CSS에 관해 기존에 배운 HTML 요소들과, CSS 스타일링 방법에 대해 복습하는 강의를 들으며 아래의 새로운 태그를 배웠고,
강조 태그
<em>강조할 컨텐츠</em> //(시스템에서 읽어 줄 때 텀을 두면서 어조를 조금 바꾸는 식으로 강조)<strong>강조할 컨텐츠</strong> //(시스템에서 읽어줄 때 강하게 읽으면서 강조)파비콘 태그
<link rel="icon" href="이미지 경로.이미지 확장자명" type="image/x-icon">
HTML과 CSS를 summery하는 웹페이지를 만들었다.
강의를 따라 배포한 netlify 링크가 아마 하루까지밖에 유효하지 않는다고 해서, 아래에 작성한 코드를 첨부한다.
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML & CSS 기초</title>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;900&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles/styles.css" />
</head>
<body>
<header>
<h1>HTML & CSS 기초 요약 정리</h1>
<img src="images/html-css.png" alt="HTML and CSS logos" />
</header>
<main>
<section>
<h2>HTML 요약 정리</h2>
<p>
HTML(하이퍼텍스트 마크업 언어)는 페이지 콘텐츠, 구조 및 의미를 정의하는 데 사용됩니다.
스타일링을 위한 목적으로는 사용하지 <strong>않습니다</strong>.
대신에 CSS를 사용하세요!
</p>
<ul id="html-list">
<li class="extra-important">
HTML는 콘텐츠를 설명(주석)하기 위해 "요소(elemants)"를 사용합니다.
</li>
<li>
HTML 요소(elemants)는 일반적으로 여는 태그, 콘텐츠, 그리고 닫는 태그로 구성됩니다.
</li>
<li class="extra-important">
이미지 태그와 같이, 내용이 없는 '빈 요소(void elemants)'도 사용 할 수 있습니다.
</li>
<li class="extra-important">
요소(elemants)에는 속성을 사용하여 구성할 수도 있습니다.
</li>
<li>
요소(elemants)의 사용에 대한 경험은 시간이 지남에 따라 쌓이게 될 것이니 걱정하지 마세요.
</li>
</ul>
<p>
사용가능한 다른 모든 HTML 요소(elemants)에 대해서는
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element"
>the MDN HTML element reference</a
>에서 학습 하실 수 있습니다.
</p>
</section>
<section>
<h2>CSS 요약 정리</h2>
<p>
CSS (Cascading Style Sheets)는 페이지 콘텐츠를 스타일링 하는데에 쓰입니다.
</p>
<ul id="css-list">
<li>스타일은 속성과, 속성에 대한 값이라는 하나의 쌍을 통해서 할당됩니다.</li>
<li>스타일은 "style" 속성을 통해 할당 할 수 있습니다.</li>
<li class="extra-important">
코드의 중복을 피하기 위해, 일반적으로 전역 스타일링을 사용합니다.
</li>
<li>
또는, "link"를 사용하여 외부 스타일시트 파일을 통해 스타일링 할 수 있습니다.
</li>
<li class="extra-important">
CSS 작업시, "상속", "특이성", "박스 모델"과 같은 개념을 잘 이해하고 하는것이 좋습니다.
</li>
</ul>
<p>
사용 가능한 모든 CSS 속성 및 값에 대한 자세한 내용은
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference"
>the MDN CSS property reference</a
>에서 학습 하실 수 있습니다.
</p>
</section>
</main>
<footer>
<a href="pdfs/html-css-basics-summary.pdf" target="_blank"
>요약 정리 다운로드 하기</a
>
<p>(c) Yana Ko</p>
</footer>
</body>
</html>#styles.css
body {
font-family: 'Roboto', sans-serif;
background-color: rgb(244, 234, 255);
}
h1 {
font-size: 52px;
color: rgb(88, 49, 196);
}
header {
text-align: center;
padding: 32px;
}
header img {
width: 300px;
}
main {
background-color: rgb(122, 74, 218);
padding: 32px;
margin: 32px auto;
width: 700px;
border-radius: 8px;
color: rgb(248, 241, 255);
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
margin: 14px 0;
padding-left: 10px;
border-left: 5px solid transparent;
}
a {
text-decoration: none;
color: rgb(36, 3, 102);
background-color: rgb(255, 237, 177);
padding: 2px 6px;
border-radius: 4px;
}
a:hover,
a:active {
background-color: rgb(250, 201, 39);
}
footer {
text-align: center;
margin-bottom: 100px;
}
footer p {
color: rgb(131, 113, 149);
margin-top: 30px;
}
footer a {
padding: 12px 20px;
border-radius: 8px;
background-color: rgb(250, 201, 39);
color: rgb(66, 51, 4);
}
footer a:hover,
footer a:active {
background-color: rgb(255, 186, 58);
}
.extra-important {
color: rgb(255, 237, 177);
border-color: rgb(247, 209, 85);
}
.highlight {
font-weight: bold;
}다운로드 버튼을 통해 다운로드할 요약정리. pdf
HTML & CSS Basics - First Summary
We learned a lot about HTML and CSS - two of the most important languages you need to know as a web developer.
Here's a concise summary of all the core features we learned about thus far. Features which you need to know because you will use them all the time!
HTML Summary What & Why?
HTML (HyperText Markup Language) is the heart of every webpage. It defines the structure of the webpage and annotates the content to tell the browser what to display and provide extra meaning. Without HTML, text would always be "just text" - there would be no semantic difference between titles, normal text, subtitles etc. You also wouldn't be able to add images or links.
Even though browsers by default add styles for certain HTML elements (e.g. <h1> elements are bold and bigger by default), you don't use HTML for styling purposes!
Instead, HTML adds semantic meaning to your content - it provides annotations that describe your content. And in the case of certain elements (e.g. <img>, <a>) it also tells the browser what to display (e.g. show an image) and what to do (e.g. navigate to another page).
Your website is not just viewed by you but it's also parsed by search engine crawlers or presented by assistive technologies like screen readers. That's why describing your content correctly matters a lot!
HTML Element Anatomy
HTML elements are typically made up of an opening tag (e.g. <h1>), some content (e.g. Hi there!) and a closing tag (e.g. </h1>).
HTML elements can also receive attributes that allow you to add extra behavior or configuration to the element (it depends on the attribute).
For example, a link (<a>) requires a href attribute to tell the browser where it should lead to:
<p>This leads <a href="https://www.google.com">to Google</a>.</p>
There also are some void elements though - e.g. <img>. Those elements don't need
a closing tag since they don't hold any content.
Nesting HTML Elements
One key characteristic of HTML is that you can nest elements into each other - just as you can see it in this example:
Here, the <li> element is a so-called child element of <ul> (which is the parent). And it even has a child element itself: The link (<a>) element (which is a descendant of the <ul> element therefore - on the other hand, <ul> is an ancestor of <a>).
The second <li> ("Another item") would be a sibling to the first <li> - together, they form the children of <ul>.
When writing HTML code, you typically build deeply nested structures because most content can only be described accurately if you do combine HTML elements like this. How else would you build a semantically correct list of links?
<img src="some-image.jpg" alt="A beautiful image of something">
<!-- or -->
<img src="some-image.jpg" alt="A beautiful image of something" />
<ul>
<li>This leads to <a href="https://www.google.com">Google</a></li>
<li>Another item</li>
</ul>
HTML Structure & Skeleton
There are two big groups of HTML elements:
- Elements for presenting and describing your page content (e.g. h1, p, ul, a, img etc.)
- Elements for describing your overall page and for linking to other required resources (e.g. title, meta, link, style)
That's why a properly formatted HTML document should have a "skeleton" that defines two main areas:
1. <body> for page content 2. <head> for metadata
Therefore, a correct HTML document skeleton (which you should use in every .html file you create) should look like this:
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
<!-- Other metadata -->
</head>
<body>
<h1>Hi there!</h1>
<!-- Other page content -->
</body>
</html>
<!-- .... --> marks a comment by the way - this comment will not show up on the page when rendered by the browser.
Inline vs Block Elements
You also learned that are two main kinds of content (<body>) elements in HTML:
- Block elements (e.g. h1, p, ul, ...)
- Inline elements (e.g. a, span, img)
Block elements always reserve the entire width of the screen for themselves (though that can be changed by CSS).
Inline elements on the other hand are - as the name suggests - there to fit "into a line with other elements". It would, for example, be strange if a link (<a>) would force a line break because it reserves the entire screen width for itself.
On the other hand, a new paragraph (<p>) or title (<h1>, <h2> etc.) should probably not be squeezed into the same line as some other text.
You can change that behavior via CSS though, in case you need to.
HTML Elements We Know Thus Far
Up to this point, we learned about a lot of important elements already - here's a summary list:
<head> Elements
<meta>: Can be used to add extra metadata to your page - e.g. a description that could be picked up by search engine crawlers
<title>: Allows you to define a page title (will be used by search engines but also shows up in the browser tabs)
<style>: Can be used to define global CSS styles for the page
<link>: Allows you to link ("connect") your HTML file to some other resource - typically to a .css file which's styles will then be applied as global styles to that HTML document
<body>Elements:
<h1>, <h2>, <h3> etc: Headings (titles) which you can add to your page. Should be used in order and only one <h1> element should be used per HTML document. A <h2> element acts as a subtitle, a <h3> element is then another subtitle on an even lower level.
<p>: Can be used to define a regular paragraph of inline content (typically text)
<em>: Can be used to add emphesis to a word or phrase
<strong>: Can be used to add strong emphesis to a word or phrase (as if you would be saying it out aloud, strongly emphasing it verbally)
<img>: Can be used to display an image. You need to set the image source path via the src attribute. And you should set some alternative text via the alt attribute - this text is displayed if the image can't be loaded or if a user who uses an assistive technology visits your page
<ul>/<ol>: Can be used to render ordered or unordered lists of data. Use this element if you got list data.
<li>: Used inside of <ul> or <ol> to define the individual list items of that list.
<header>: A block element that defines a header - for the entire page or a subsection of the page (more on that later)
<footer>: A block element that defines a footer - for the entire page or a subsection of the page (more on that later)
<main>: Defines the main content of a page - you should not have more than one <main> element per HTML document.
<section>: Defines a new section in your document - typically contains a heading (e.g. <h2>), though it's not a "must-have"
<span>: A meaningless inline element which can be used to wrap content that should be targeted with CSS styling (e.g. with help of a CSS class or an id)
<div>: A meaningless block element which can be used to wrap content that should be targeted with CSS styling (e.g. with help of a CSS class or an id)
We'll of course see many more elements throughout this course - you can also explore all available elements in the MDN HTML Elements Reference.
CSS Summary What & Why?
CSS (Cascading Style Sheets) is a language that allows you to define style definitions for your HTML document. These definitions will be picked up by the browser and control how the content will be displayed (e.g. that some text is red, which font size it should have etc.).
Where HTML defines the structure and meaning of your content (and of course also helps with displaying the content in the first place - e.g. with the <img> element), CSS is used to then present the content exactly how you want to present it. It adds no meaning or annotation - it's really just about how things look.
If oyu want to change text colors, background colors, sizes, spacings, distances, borders, shadows, positions and all these things, you need CSS.
CSS Syntax
There's a broad variety of available CSS properties which you can define. All those properties then take different values - the concrete values you can assign depend on the property for which you're assigning it.
color: #ccc; /* hexadecimal represention of rgb color */
color: rgb(204, 204, 204); /* same colors as above */
font-size: 18px; /* setting a size in device-independent pixels */
CSS styles can be defined in different ways, for example "inline" via the style attribute:
<h1 style="font-size: 20px">Hi there!</h1>
But using such "inline styles" is typically not recommended as it comes with various disadvantages. Most importantly, it clutters your HTML code (hard to maintain!), requires lots of duplication and copy and pasting and it also is hard to change: You often need to visit and adjust multiple elements if you want to adjust one single style.
That's why you typically define global CSS styles via the <style> element or in an external .css file which is then imported via a <link> element.
When using such global styles, the CSS syntax stays the same but you group your property-value assignments into a so-called CSS rule which also a CSS selector that defines for which HTML elements your styles should be applied:
h1 { /* is applied to ALL <h1> elements */
font-size: 20px;
}
#some-id { /* is applied to a single HTML element with id="some-id" */
color: #ccc;
}
.my-link { /* is applied to ALL HTML elments with class="my-link" */
text-decoration: none;
}
You can also combine CSS selectors:
h1, p { /* applies the rule to all <h1> and <p> elements */
color: rgb(204, 204, 204);
}
p a { /* targets all <a> elements that are descendants of a <p> */
color: red;
}
You can also provide specific styles for specific states of HTML elements - with pseudo-selectors:
a:hover { /* targets <a> where the user's mouse is hovering over */
font-weight: bold;
}
What Can You Style?
You can really style (almost) anything with CSS. That's why you should use CSS for styling and not use certain HTML elements because you want a certain look.
HTML is there to define the content, provide the structure and meaning, CSS is then there to present your content however you want to present it.
CSS Values & Units
Since there are dozens of CSS properties you can target (we only saw a small subset thus far), there are also hundreds of possible values you can assign.
The concrete values you can assign always depend on the property you're currently defining: Color properties (e.g. color, background-color) want color values (e.g. #fa923f, #ccc, rgb(204, 204, 204), hsl(180, 20, 75), red). Dimension properties (e.g. font-size, margin) want dimension values (e.g. 18px). The font- family property wants a list of font families it should use (e.g. font-family: 'Oswald', sans-serif).
Even though the number of available properties and values and units can be intimidating right now, you'll develop a good feeling for the different properties and values over time. In the end, you will always have a couple of properties and values that you use extremely often (and therefore know by heart).
Of course you can also always use the IDE auto-completion support and resources like the MDN CSS Properties List to learn about all possible properties and values.
The Box Model
When working with CSS it's important to understand that HTML elements have a so-called "box model".
This means that all HTML elements do have various "layers" that can be styled:
The content
A padding around the content (but inside of the border) A border
A margin around the entire element
You don't need to set any padding, border or margin - you can set only what you need. But with these different "layers", you can add spacing between a visible border and the content and / or around an element.
It is worth noting that block and inline elements behave differently though:
Block elements: It behaves as described above
Inline elements: Vertical margin is ignored, vertical padding is added but does not push other elements or content away
You can also change if an element behaves like a block or inline element via the display property (e.g. display: block sets the behavior to "block element" even if it normally is an inline element). There also inline-block as a possible display value which will basically merge the two behaviors and "unlock" full block behavior whilst keeping the content inline with other content.
Why Is It Called "Cascading"?
Why is it called "Cascading Style Sheets"?
Because a cascade of style definitions can affect one and the same element - i.e. multiple CSS rules can affect the same element.
Here's an example:
<style> a{
text-decoration: none;
}
.default-link {
color: red;
}
</style>
<a class="default-link" href="...">Some linke</a>
In this example, the two CSS rules are both affecting the <a> element.
Why would you have two instead of just one rule? Because you maybe have different links on your page - some with a default-link class, some without it.
Because multiple CSS rules can affect the same HTML element, you can split your CSS definitions across multiple rules. This avoid unnecessary copy & pasting and code duplication!
Specificity
But what happens if different CSS rules target the same CSS property? Consider this example:
<style> a{
color: blue;
}
.default-link {
color: red;
}
</style>
<a class="default-link" href="...">Some linke</a>
In this case, the link would be red because the order of CSS rules matters - the later rule (in this case .default-link wins).
But actually, it's a bit more complex than that. It's not just about the order. Instead, there is a concept called specificity (yes, it's a horrible word!) involved.
The higher the specificity of a rule, the more important it is. And higher specificity beats lower specificity.
The order of your code influences the specificity but it's not the only factor.
The kind of selector you're using also plays an important role - for example, an id
selector (like #some-id) beats a regular tag type selector (like h1).
And that kind of makes sense: After all, if you target a specific id you have a way
more specific selection criteria than if you just target the tag type.
And whilst I could now write a long list of specificity factors and which rule wins over which other rule, the comforting thing is that you can basically trust your own common sense.
Just as it makes sense that an id is more specific than "just the tag", a combined selector (e.g. p a { ... }) would win over a "standalone" selector (e.g. a { ... }).
So the more specific your CSS selectors get, the higher the specificity. And higher specificity beats lower specificity.
Inheritance
Connected to the "Cascading" and "Specificity" concepts is the concept of "Inheritance".
HTML elements are not just affected by styles that are defined in rules directly targeting those elements but instead they can also be styled by rules that target parent or ancestor elements.
Here's an example:
<style>
body {
font-family: 'Open Sans', sans-serif;
text-align: center;
}
p{
margin: 20px;
}
</style>
<body>
<h1>I use 'Open Sans' as a font-family!</h1>
<p>So do I! And we're both aligned to the center.</p>
</body>
In this example, both <h1> and <p> would be affected by the font-family and text-align CSS definitions in the body rule.
Why?
Because of "Inheritance".
They inherit the styles defined in the parent element.
Not all CSS properties are inheritable though - but again, you can trust your common sense.
Text color, most font styles etc. are inherited. Margins, paddings, borders etc. are not.
Browser Defaults
Browsers also define some default styles for certain elements - for example, they often make the <h1> element bigger and give it a bold font-weight.
This has a very low specificity though and hence you can easily overwrite these default styles with any CSS selector.
CSS Properties We Know Thus far
Font-related:
font-family: Set the font family you want to use - can be a single font or (typically) a list of fonts, where the first font is used and the other fonts act as fallback fonts if the first font can't be loaded
font-size: Sets the text size - can be set in "device independent" pixels (e.g. 18px) or other values which we'll discover later
font-weight: Allows you to set the weight of some text (default is normal, you can choose a numeric weight like 700 or an alternative like bold instead). Important: Your loaded font needs to support that weight!
Text:
text-align: Controls the alignment of the text (e.g. center, left, right)
text-decoration: Can be used to add extra decoration (or remove it) like underlining (e.g. text-decoration: underline)
Colors:
color: Sets the text color
background-color: Sets the background color of an element
Colors can be set with differnt kinds of units:
Hexadecimal number identifiers (e.g. #fa923f, #ccc) where you got three two-digit pairs that define the r/g/b (red, green, blue) color parts
The rgb() "function" that allows you to set a r/g/b color with decimal numbers
The hsl() function which can be used to define a color as a
combination of hue/saturation/lightness
You can use either of these color units - it comes down to your personal preference; every color can be expressed with each of these three methods
There also is rgba() and hsla() in case you also want to add an "alpha channel" (transparency - value between 0 and 1) to your color
Box Model:
margin: Sets extra spacing around an element - could be set with pixels
(e.g. 18px)
margin is the shorthand notation that sets spacing in all directions, the long-form would be margin: <top> <right> <bottom> <left> (e.g. margin: 10px 5px 8px 3px)
You also have margin-left, margin-right, margin-top and margin-bottom to target specific directions
padding: Adds extra spacing inside of an element - could be set with pixels (e.g. 18px)
Just like margin, you can use the shorthand notation padding: <top> <right> <bottom> <left> or target specific directions like padding-bottom
border: Can be used to define a visible border around the element content + padding (e.g. border: 1px solid black)
border-radius: Can be used to give a box rounded corners (even if no border is defined)
Sizes:
width: Used to define a fixed width for an element - instead of using the full screen width for block elements or the content width for inline elements (could be set in pixels like 18px)
height: Used to define a fixed height for an element - instead of inferring it automatically based on the content height in the element
Other:
box-shadow: Can be used to define a shadow for an element - is set by defining a x-offset, y-offset, an optional blur radius, an optional spread radius and a color (e.g. box-shadow: 0 1px 8px rgba(0, 0, 0, 0.2))
웹사이트 제공 : 호스팅과 배포
배포
웹사이트의 코드를 사용자들을 위한 원격 컴퓨터(서버) 상에 올리는 것.
호스팅
원격 컴퓨터가 웹사이트의 코드를 저장 혹은 호스트 하여, 사용자의 요청을 받으면 응답으로 웹사이트 코드를 보내주는 것.
배포 과제(배포한 사이트 링크)
git 과 github
그래픽 사용자 인터페이스 GUI & 명령줄 인터페이스 CLI
git과 github의 차이점에 대해서 설명하면서, GUI와 CLI에 대해서도 가볍게 다루고 넘어갔다.
GUI : 그래픽 유저 인터페이스
시각화된 인터페이스로, 버튼 등 화면에 띄워진 컨텐츠를 활용해 툴을 다룬다. 여기에서는 github(PC)나 git kraken과 같이 git과 github를 이용한 버전관리를 시각화된 인터페이스 내에서 진행할 때 GUI를 통한다고 할 수 있다.
CLI : Command Line Interface 즉, 명령어 라인 인터페이스
텍스트 기반 인터페이스로, cmd 혹은 iterms와 같은 커널(터미널)에 명령어를 직접 타이핑함으로써 툴을 사용하는 방식을 말한다.
여기에서는 cmd 혹은 terminal을 통해 git add -A와 같은 명령어를 직접 입력하여 git을 통한 버전관리는 진행하는 것을 말한다.
아래에는 내가 정리한 Git 사용 Flow를 첨부한다.
*아래에는 내가 개인적으로 정리한 git과 github를 이용한 버전관리 flow이미지와, 기존에 정리해 둔 블로그 글을 첨부한다.
[Git] 깃(git)과 깃허브(github)란 무엇인가?
[Git] 깃(git)과 깃허브(github)란 무엇인가?
1. GIT이란 무엇인가? 깃(Git)은 2005년에 리누스 토르발스에 의해 개발된 '분산 버전관리 시스템(Distributed Version Control Systems - DVCS)'으로, 컴퓨터 파일의 변경사항을 추적하고 여러명의 사용자들 간
yanacoding.tistory.com
[Git] Clone부터 PR까지
[Git] Clone부터 PR까지, project cycle
1] Git clone 원격 저장소의 파일을 로컬 컴퓨터로 받아오는 과정. ㄴ 원격 저장소의 master branch(이외에 파일을 받아올 branch)에서 clone 혹은 pull. 1) 프로젝트 초기 다운로드 : clone 사용 2) 프로젝트 진
yanacoding.tistory.com
오늘의 멘토링
- 신입 백엔드 개발자(스프링 기반)가 갖춰야할 역량의 미니멈은 어느 정도 수준일까요?
당연히 모든 면에서 깊이있게 잘 알고 있다면 좋겠으나, 현실적으로 ‘최소한 이 정도는 갖췄으면 좋겠다’ 하는 수준이 어느 정도인지 자세히 알고 싶습니다. (프레임워크, DB, CS 지식, 등 너무 분야가 넓을 수도 있을 것 같은데 만약 그렇다면 일단 가장 중요한 한 두가지만 골라서 말씀 해주셔도 감사하겠습니다.- 기업마다 요구가 다르기때문에 답변하기 애매한 질문이다. 하지만 멘토님 기준이라면
- 예를들어 스프링개발자라면 인증인가를 해봤으면 좋겠다고 기대하는데, 기대하는 이유로는 단순히 기능을 써봤다고 할 뿐 아니라, 동작 원리에 대해서 고민하고 필터단에서 거르는게 얼마나 효율적인지, 서블릿중에서 과연 어떠한 순서로 어디에서 필터링이 일어나는지 등을 공부하는 개발자를 원할 것 같다.
- DB는 sql 쿼리를 작성 할 줄 아는 정도의 수준을 바라고, CS를 잘 아는 주니어를 원하는 이유는 원리를 파악하는데에 있어서 CS 지식의 유무가 그 힘이 되기 때문이다.
'Web_Frontend > HTML & CSS' 카테고리의 다른 글
| [CSS] CSS 레이아웃 및 포지셔닝, 반응형 이해하기 (1) | 2023.12.20 |
|---|---|
| [css] CSS 레이아웃과 포지셔닝 (1) | 2023.12.19 |
| [html,css] HTML & CSS 자세히 알아보기 (0) | 2023.12.14 |
| [html,css] 웹개발 기본과 HTML & CSS (0) | 2023.12.13 |
| [CSS] CSS 기본 선택자(tag 선택자, 전체 선택자(*선택자), 혼합 선택자) (0) | 2021.11.18 |
야나의 코딩 일기장 :) #코딩블로그 #기술블로그 #코딩 #조금씩,꾸준히
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!
![[CSS] CSS 레이아웃 및 포지셔닝, 반응형 이해하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F2sQHJ%2FbtsCg6bZfr0%2FKhfHl5hVt0fzxkKQrVMacK%2Fimg.png)
![[css] CSS 레이아웃과 포지셔닝](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FzZA1f%2FbtrwwrlzGOd%2FoNjPaxyi0TSN1U3Wi0n3z0%2Fimg.png)
![[html,css] HTML & CSS 자세히 알아보기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbbTBU4%2FbtsBR7XkQH0%2F1z1cm85p9hN1sUT4kCYK8K%2Fimg.png)