반응형

안녕! 오늘은 div 사용 전,

CSS 사용법에 대해서 배워볼꺼야!

 

그게 뭐냐구?

 

만약 이부분이 아직 이해가 안된다면

찬차~안히 다시 한번 살펴보고 와도 좋아!

 

 

 

https://kecoz.tistory.com/37?category=841305

 

[HTML/CSS] HTML / CSS 어떤 녀석일까요?

내가 너무 dev에 관한 포스트를 올리지 않아서 "흠.. 왜 안올려?"라며 생각하는 사람들이 있을것 같아서 가장 기초적인 HTML/CSS부터 해보기로했어 가끔 "이야.. 코딩할줄 아세요? 크으.. 어떤 언어로 프로그래밍..

kecoz.tistory.com

여기에서 한번 언급을 했었는데

 

HTML이 원빈이고

CSS는 스타일리스트

 

html + css =  개쩌는 원빈!

표현을 챕터라고 해두지!

누가 키워드로 원빈을 검색하고 들어왔었어 어머나

 

어쨌든! 한번 시작을 해볼게!


 

 

혼자서 사용은 안되나,

HTML을 꾸며줄때 쓰는 친구야

 

HTML 자체는 그냥 딱 보기에는

" 쟤 옷이 이거 밖에 없어 ?"

싶을 정도로 구성이 구려

아주 많이.. 

 

각종 기능이 들어가지만

딱! 거기까지라는거지!

 

CSS가 가진 태그 친구들을 볼까 ?

일단 하단에 내가 링크를 걸어둔 친구가 있어

 

https://www.w3schools.com/cssref/default.asp

 

CSS Reference

grid A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties

www.w3schools.com

 

 

일단 여기는 하단에 링크를 걸어둔 곳이야

바~이블!

 

더보기

align-content Specifies the alignment between the lines inside a flexible container when the items do not use all available space
align-items Specifies the alignment for items inside a flexible container
align-self Specifies the alignment for selected items inside a flexible container
all Resets all properties (except unicode-bidi and direction)
animation A shorthand property for all the animation-* properties
animation-delay Specifies a delay for the start of an animation
animation-direction Specifies whether an animation should be played forwards, backwards or in alternate cycles
animation-duration Specifies how long an animation should take to complete one cycle
animation-fill-mode Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)
animation-iteration-count Specifies the number of times an animation should be played
animation-name Specifies a name for the @keyframes animation
animation-play-state Specifies whether the animation is running or paused
animation-timing-function Specifies the speed curve of an animation
backface-visibility Defines whether or not the back face of an element should be visible when facing the user
background A shorthand property for all the background-* properties
background-attachment Sets whether a background image scrolls with the rest of the page, or is fixed
background-blend-mode Specifies the blending mode of each background layer (color/image)
background-clip Defines how far the background (color or image) should extend within an element
background-color Specifies the background color of an element
background-image Specifies one or more background images for an element
background-origin Specifies the origin position of a background image
background-position Specifies the position of a background image
background-repeat Sets if/how a background image will be repeated
background-size Specifies the size of the background images
border A shorthand property for border-width, border-style and border-color
border-bottom A shorthand property for border-bottom-width, border-bottom-style and border-bottom-color
border-bottom-color Sets the color of the bottom border
border-bottom-left-radius Defines the radius of the border of the bottom-left corner
border-bottom-right-radius Defines the radius of the border of the bottom-right corner
border-bottom-style Sets the style of the bottom border
border-bottom-width Sets the width of the bottom border
border-collapse Sets whether table borders should collapse into a single border or be separated
border-color Sets the color of the four borders
border-image A shorthand property for all the border-image-* properties
border-image-outset Specifies the amount by which the border image area extends beyond the border box
border-image-repeat Specifies whether the border image should be repeated, rounded or stretched
border-image-slice Specifies how to slice the border image
border-image-source Specifies the path to the image to be used as a border
border-image-width Specifies the width of the border image
border-left A shorthand property for all the border-left-* properties
border-left-color Sets the color of the left border
border-left-style Sets the style of the left border
border-left-width Sets the width of the left border
border-radius A shorthand property for the four border-*-radius properties
border-right A shorthand property for all the border-right-* properties
border-right-color Sets the color of the right border
border-right-style Sets the style of the right border
border-right-width Sets the width of the right border
border-spacing Sets the distance between the borders of adjacent cells
border-style Sets the style of the four borders
border-top A shorthand property for border-top-width, border-top-style and border-top-color
border-top-color Sets the color of the top border
border-top-left-radius Defines the radius of the border of the top-left corner
border-top-right-radius Defines the radius of the border of the top-right corner
border-top-style Sets the style of the top border
border-top-width Sets the width of the top border
border-width Sets the width of the four borders
bottom Sets the elements position, from the bottom of its parent element
box-decoration-break Sets the behavior of the background and border of an element at page-break, or, for in-line elements, at line-break.
box-shadow Attaches one or more shadows to an element
box-sizing Defines how the width and height of an element are calculated: should they include padding and borders, or not
break-after Specifies whether or not a page-, column-, or region-break should occur after the specified element
break-before Specifies whether or not a page-, column-, or region-break should occur before the specified element
break-inside Specifies whether or not a page-, column-, or region-break should occur inside the specified element
caption-side Specifies the placement of a table caption
caret-color Specifies the color of the cursor (caret) in inputs, textareas, or any element that is editable
@charset Specifies the character encoding used in the style sheet
clear Specifies on which sides of an element floating elements are not allowed to float
clip Clips an absolutely positioned element
color Sets the color of text
column-count Specifies the number of columns an element should be divided into
column-fill Specifies how to fill columns, balanced or not
column-gap Specifies the gap between the columns
column-rule A shorthand property for all the column-rule-* properties
column-rule-color Specifies the color of the rule between columns
column-rule-style Specifies the style of the rule between columns
column-rule-width Specifies the width of the rule between columns
column-span Specifies how many columns an element should span across
column-width Specifies the column width
columns A shorthand property for column-width and column-count
content Used with the :before and :after pseudo-elements, to insert generated content
counter-increment Increases or decreases the value of one or more CSS counters
counter-reset Creates or resets one or more CSS counters
cursor Specifies the mouse cursor to be displayed when pointing over an element
direction Specifies the text direction/writing direction
display Specifies how a certain HTML element should be displayed
empty-cells Specifies whether or not to display borders and background on empty cells in a table
filter Defines effects (e.g. blurring or color shifting) on an element before the element is displayed
flex A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties
flex-basis Specifies the initial length of a flexible item
flex-direction Specifies the direction of the flexible items
flex-flow A shorthand property for the flex-direction and the flex-wrap properties
flex-grow Specifies how much the item will grow relative to the rest
flex-shrink Specifies how the item will shrink relative to the rest
flex-wrap Specifies whether the flexible items should wrap or not
float Specifies whether or not a box should float
font A shorthand property for the font-style, font-variant, font-weight, font-size/line-height, and the font-family properties
@font-face A rule that allows websites to download and use fonts other than the "web-safe" fonts
font-family Specifies the font family for text
font-feature-settings Allows control over advanced typographic features in OpenType fonts
@font-feature-values Allows authors to use a common name in font-variant-alternate for feature activated differently in OpenType
font-kerning Controls the usage of the kerning information (how letters are spaced)
font-language-override Controls the usage of language-specific glyphs in a typeface
font-size Specifies the font size of text
font-size-adjust Preserves the readability of text when font fallback occurs
font-stretch Selects a normal, condensed, or expanded face from a font family
font-style Specifies the font style for text
font-synthesis Controls which missing typefaces (bold or italic) may be synthesized by the browser
font-variant Specifies whether or not a text should be displayed in a small-caps font
font-variant-alternates Controls the usage of alternate glyphs associated to alternative names defined in @font-feature-values
font-variant-caps Controls the usage of alternate glyphs for capital letters
font-variant-east-asian Controls the usage of alternate glyphs for East Asian scripts (e.g Japanese and Chinese)
font-variant-ligatures Controls which ligatures and contextual forms are used in textual content of the elements it applies to
font-variant-numeric Controls the usage of alternate glyphs for numbers, fractions, and ordinal markers
font-variant-position Controls the usage of alternate glyphs of smaller size positioned as superscript or subscript regarding the baseline of the font
font-weight Specifies the weight of a font
grid A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties
grid-area Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties
grid-auto-columns Specifies a default column size
grid-auto-flow Specifies how auto-placed items are inserted in the grid
grid-auto-rows Specifies a default row size
grid-column A shorthand property for the grid-column-start and the grid-column-end properties
grid-column-end Specifies where to end the grid item
grid-column-gap Specifies the size of the gap between columns
grid-column-start Specifies where to start the grid item
grid-gap A shorthand property for the grid-row-gap and grid-column-gap properties
grid-row A shorthand property for the grid-row-start and the grid-row-end properties
grid-row-end Specifies where to end the grid item
grid-row-gap Specifies the size of the gap between rows
grid-row-start Specifies where to start the grid item
grid-template A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties
grid-template-areas Specifies how to display columns and rows, using named grid items
grid-template-columns Specifies the size of the columns, and how many columns in a grid layout
grid-template-rows Specifies the size of the rows in a grid layout
hanging-punctuation Specifies whether a punctuation character may be placed outside the line box
height Sets the height of an element
hyphens Sets how to split words to improve the layout of paragraphs
image-rendering Gives a hint to the browser about what aspects of an image are most important to preserve when the image is scaled
@import Allows you to import a style sheet into another style sheet
isolation Defines whether an element must create a new stacking content
justify-content Specifies the alignment between the items inside a flexible container when the items do not use all available space
@keyframes Specifies the animation code
left Specifies the left position of a positioned element
letter-spacing Increases or decreases the space between characters in a text
line-break Specifies how/if to break lines
line-height Sets the line height
list-style Sets all the properties for a list in one declaration
list-style-image Specifies an image as the list-item marker
list-style-position Specifies the position of the list-item markers (bullet points)
list-style-type Specifies the type of list-item marker
margin Sets all the margin properties in one declaration
margin-bottom Sets the bottom margin of an element
margin-left Sets the left margin of an element
margin-right Sets the right margin of an element
margin-top Sets the top margin of an element
max-height Sets the maximum height of an element
max-width Sets the maximum width of an element
@media Sets the style rules for different media types/devices/sizes
min-height Sets the minimum height of an element
min-width Sets the minimum width of an element
mix-blend-mode Specifies how an element's content should blend with its direct parent background
object-fit Specifies how the contents of a replaced element should be fitted to the box established by its used height and width
object-position Specifies the alignment of the replaced element inside its box
opacity Sets the opacity level for an element
order Sets the order of the flexible item, relative to the rest
orphans Sets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element
outline A shorthand property for the outline-width, outline-style, and the outline-color properties
outline-color Sets the color of an outline
outline-offset Offsets an outline, and draws it beyond the border edge
outline-style Sets the style of an outline
outline-width Sets the width of an outline
overflow Specifies what happens if content overflows an element's box
overflow-wrap Specifies whether or not the browser may break lines within words in order to prevent overflow (when a string is too long to fit its containing box)
overflow-x Specifies whether or not to clip the left/right edges of the content, if it overflows the element's content area
overflow-y Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area
padding A shorthand property for all the padding-* properties
padding-bottom Sets the bottom padding of an element
padding-left Sets the left padding of an element
padding-right Sets the right padding of an element
padding-top Sets the top padding of an element
page-break-after Sets the page-break behavior after an element
page-break-before Sets the page-break behavior before an element
page-break-inside Sets the page-break behavior inside an element
perspective Gives a 3D-positioned element some perspective
perspective-origin Defines at which position the user is looking at the 3D-positioned element
pointer-events Defines whether or not an element reacts to pointer events
position Specifies the type of positioning method used for an element (static, relative, absolute or fixed)
quotes Sets the type of quotation marks for embedded quotations
resize Defines if (and how) an element is resizable by the user
right Specifies the right position of a positioned element
scroll-behavior Specifies whether to smoothly animate the scroll position in a scrollable box, instead of a straight jump
tab-size Specifies the width of a tab character
table-layout Defines the algorithm used to lay out table cells, rows, and columns
text-align Specifies the horizontal alignment of text
text-align-last Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify"
text-combine-upright Specifies the combination of multiple characters into the space of a single character
text-decoration Specifies the decoration added to text
text-decoration-color Specifies the color of the text-decoration
text-decoration-line Specifies the type of line in a text-decoration
text-decoration-style Specifies the style of the line in a text decoration
text-indent Specifies the indentation of the first line in a text-block
text-justify Specifies the justification method used when text-align is "justify"
text-orientation Defines the orientation of the text in a line
text-overflow Specifies what should happen when text overflows the containing element
text-shadow Adds shadow to text
text-transform Controls the capitalization of text
text-underline-position Specifies the position of the underline which is set using the text-decoration property
top Specifies the top position of a positioned element
transform Applies a 2D or 3D transformation to an element
transform-origin Allows you to change the position on transformed elements
transform-style Specifies how nested elements are rendered in 3D space
transition A shorthand property for all the transition-* properties
transition-delay Specifies when the transition effect will start
transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete
transition-property Specifies the name of the CSS property the transition effect is for
transition-timing-function Specifies the speed curve of the transition effect
unicode-bidi Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document
user-select Specifies whether the text of an element can be selected
vertical-align Sets the vertical alignment of an element
visibility Specifies whether or not an element is visible
white-space Specifies how white-space inside an element is handled
widows Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element
width Sets the width of an element
word-break Specifies how words should break when reaching the end of a line
word-spacing Increases or decreases the space between words in a text
word-wrap Allows long, unbreakable words to be broken and wrap to the next line
writing-mode Specifies whether lines of text are laid out horizontally or vertically
z-index Sets the stack order of a positioned element

레퍼런스만.. 228 항목이렷다!

그러니 나는 하면서 설명을 하고자 결정을 했어!

 

그 대신 몇가지 중요한걸 설명을

먼저 해야겠다 싶은거지

 

CSS의 우선순위를 조금 적어볼까해

 

"아 머리아프게 무슨 우선순위임?" 

 

이건 바로 CSS가 꼬이면서 개판이 되는것보단

이걸 참조하는게 머리가 덜 아플거라 내가 장담하지!


일단 HTML 요소 중에서

<요소 정리는 내가 한번 더 올릴 예정이야>

총알은 많다 이거야!

 


 

1. 레이아웃을 이루는 태그들 먼저

body, header, section, footer 같은 영역 구별 태그 클래스를 정의 해줘야해


 

2. 그다음 시맨틱 태그들을 정의하지

header, nav, section, article, aside, footer 등으로 말이야.


3. 문서에서 내용을 표시하는 태그들의 초기화가 위치 해야해!

 

"뭐라는겨"

 

그래서 예를 들어줄게!

만약 주소로 된 링크가 있어!

그게 하이퍼링크라는건데

 

한번찍으면 얘가 보라색으로 변하는걸 본적 있을거야

 

이것처럼 말이야!

 

저 보라돌이를 파~랗게 바꾸는 방법을 말을 하는거야

 

다 파란색인데 쟤만 보라돌이면

이질감이 들거나 이상하니까 말이야!

 

그래서 텍스트 크기나, 글자간의 간격이나 컬러.. 줄의 간격들처럼

공통된 애들을 영혼까지 끌어모아서

" 얘가 가진 기본값은 파란색! 견고딕체에 12pt글자 간격좁게!!!"

라고 해주는 역할이 필요하다 이거지

 

h1,h2,h3,h4,h5,h6, p, div, dl, dt th, td . . . . . . . textDefault{
	font-family:"HY 견고딕";
    font-size:12px;
	.
        .
        .
}

이런식으로 말이야


(지금부터는 모르는 개념이 좀 나와 class, id, 상속 등등..)

 


4.  여백이나 위치를 정의할때 바깥쪽에 있는 태그부터 class를 정의하자!

클래스라는 개념이 좀 생소할거야!

이건 나중에 츤츤히 설명할테니 그냥 알고만 있어도 될것같아!

 


5. id에 적용하는 class는 집합!! 시켜서 앞쪽으로 모아서 배치해야해

id 사용은 최대한 줄이는게 중요해,

왜냐면.. 뭐가되든 관리하기 용이해야하거든

 

 


6. 텍스트를 처리하는 태그에 css를 정의할 때, 상속의 유무를 잘 기억해야해

상속의 유무를 잘 확인하고 고려 해야해. 

 

숙지가 안될때는 

<!-- 내용 --> 

주석을 활용해서 표기를 해주는 편이 좋을거야

그렇게 해야지만 쓸데없는 정의를 피할 수가 있어.

 


7. !important는 금지..

 

"금지라고 ? 그럼 왜있는데!!!"

 

이 친구는 좀.. 예외적으로 쓰이는데

정말 이 구조에 대해서 꿰뚫고 있지 않은 이상

안쓰더라구

 

물론 나도.. 나는 백앤드 개발자다 보니

쓸일이 없긴하지만..

 

그 이유는

이게 앞에서 친절하게 CSS를 다~ 설정을 해두니까

갑자기 마지막에.. 뒤에 정의된 CSS친구가

적용되어 버리면서 아주 난감한 상황이 발생 하는 경우가 있거든

 

약간 뭐랄까..

김밥의 재료는 같지만

항상 김밥 꼬다리 같이 뭔가 많거나 적은..

그런 녀석이 나오지 않게 선언을 해주는거야

 

뭐든 웹페이지를 하나만 만들더라도..

이게 모두 팀플로 이루어 지다보니까

 

아주 조심히 써야해

여러 사람이 쓰고 있는데

내가 !important를 추가 시켜서

다른 모든 사람들이 개판이되는 순간 

 

이꼴 나는거거든..

 


그리고 마지막이야.

 

8번째! 반응형, 기기별에 따른 디스플레이 크기를 지원하는 미디어들은

마지막에 모아서 한번에 작성을 해줘야해

 


츤츤히 정리해볼까 ?

 

레이아웃을 이루는 태그들 - > 시맨틱 태그 -> 태그의 초기화값

- > 가장 외부에 있는 태그에 class 부여 - > ID에 적용되는 클래스

-> 상속 유무 확인 CSS 정의 -> !important 여부 확인

 

이렇게 말이야!

 

오늘은 이렇게 CSS에 대해 알아야하는 친구들을 준비했달까 ...

알아두기만 했으면 좋겠어!

 

외우지는 않아도 

그냥 아하~하고 읽어보고 

이해만 하라는거야 ㅎㅎ

 

그리고 다음에는 div와 css를 활용을 해볼건데

이 부분 정말 중요하니까 잘 따라와야해

 

혹시나 이상한 내용이 있거나

수정 내용이 있다면 댓글로 남겨주길 바래!

그럼 20000!

 

반응형