Change the Position of Overlapping Elements with the z-index Property When elements are positioned to overlap (i.e. using position: absolute | relative | fixed | sticky), the element coming later in the HTML markup will, by default, appear on the top of the other elements. However, the z-index property can specify the order of how elements are stacked on top of one another. It must be an integer..
Push Elements Left or Right with the float Property The next positioning tool does not actually use position, but sets the float property of an element. Floating elements are removed from the normal flow of a document and pushed to either the left or right of their containing parent element. It's commonly used with the width property to specify how much horizontal space the floated element requi..
Lock an Element to the Browser Window with Fixed Positioning The next layout scheme that CSS offers is the fixed position, which is a type of absolute positioning that locks an element relative to the browser window. Similar to absolute positioning, it's used with the CSS offset properties and also removes the element from the normal flow of the document. Other items no longer "realize" where it..
Lock an Element to its Parent with Absolute Positioning The next option for the CSS position property is absolute, which locks the element in place relative to its parent container. Unlike the relative position, this removes the element from the normal flow of the document, so surrounding items ignore it. The CSS offset properties (top or bottom and left or right) are used to adjust the position..
Move a Relatively Positioned Element with CSS Offsets The CSS offsets of top or bottom, and left or right tell the browser how far to offset an item relative to where it would sit in the normal flow of the document. You're offsetting an element away from a given spot, which moves the element away from the referenced side (effectively, the opposite direction). As you saw in the last challenge, us..
Change an Element's Relative Position CSS treats each HTML element as its own box, which is usually referred to as the CSS Box Model. Block-level items automatically start on a new line (think headings, paragraphs, and divs) while inline items sit within surrounding content (like images or spans). The default layout of elements in this way is called the normal flow of a document, but CSS offers ..
앵커 태그의 호버 상태 조정 이 문제는 의사 클래스의 사용에 대해 다룰 것입니다. 의사 클래스는 요소의 특정 상태를 선택하기 위해 선택기에 추가할 수 있는 키워드입니다. 예를 들어, 앵커 태그의 스타일은 :hover 의사 클래스 선택기를 사용하여 해당 호버 상태에 대해 변경할 수 있습니다. 다음은 호버 상태에서 앵커 태그의 색상을 빨간색으로 변경하는 CSS입니다. a:hover { color: red; } 코드 편집기에는 모든 태그의 스타일을 검은색으로 지정하는 CSS 규칙이 있습니다. 사용자가 태그 위로 마우스를 가져가면 색상이 파란색이 되도록 규칙을 추가합니다. CatPhotoApp
단락의 줄 높이 설정 CSS는 텍스트 블록에서 각 줄의 높이를 변경하는 line-height 속성을 제공합니다. 이름에서 알 수 있듯이 텍스트의 각 행이 차지하는 수직 공간의 양을 변경합니다. p 태그에 line-height 속성을 추가하고 25px로 설정합니다. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure do..
단락 텍스트의 글꼴 크기 설정 CSS의 font-size 속성은 제목에만 국한되지 않고 텍스트가 포함된 모든 요소에 적용할 수 있습니다. 더 잘 보이도록 단락의 font-size 속성 값을 16px로 변경합니다. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in volup..
여러 제목 요소의 글꼴 두께 설정 마지막 챌린지에서 각 제목 태그의 글꼴 크기를 설정했습니다. 여기에서 글꼴 두께를 조정합니다. font-weight 속성은 텍스트 섹션에서 문자가 굵거나 가는 정도를 설정합니다. Set the font-weight of the h1 tag to 800. Set the font-weight of the h2 tag to 600. Set the font-weight of the h3 tag to 500. Set the font-weight of the h4 tag to 400. Set the font-weight of the h5 tag to 300. Set the font-weight of the h6 tag to 200. This is h1 text This is h2 ..
font-size를 이용한 텍스트 크기 지정 font-size 속성은 주어진 요소에서 텍스트의 크기를 지정하는 데 사용됩니다. 이 규칙은 페이지에서 텍스트의 시각적 일관성을 만들기 위해 여러 요소에 사용할 수 있습니다. 이 챌린지에서는 제목 크기의 균형을 맞추기 위해 모든 h1에서 h6 태그에 대한 값을 설정합니다. In the style tags, set the font-size of the: h1 tag to 68px. h2 tag to 52px. h3 tag to 40px. h4 tag to 32px. h5 tag to 21px. h6 tag to 14px. This is h1 text This is h2 text This is h3 text This is h4 text This is h5 text..
text-transform 속성을 사용하여 텍스트를 대문자로 만들기 CSS의 text-transform 속성은 텍스트의 모양을 변경하는 데 사용됩니다. 실제 HTML 요소의 텍스트 내용을 변경하지 않고도 웹페이지의 텍스트가 일관되게 표시되도록 하는 편리한 방법입니다. 다음 표는 다른 text-transformvalues가 예제 텍스트 "Transform me"를 어떻게 변경하는지 보여줍니다. Value Result lowercase "transform me" uppercase "TRANSFORM ME" capitalize "Transform Me" initial Use the default value inherit Use the text-transform value from the parent eleme..
요소의 불투명도 줄이기 CSS의 opacity 속성은 불투명도를 조정하거나 반대로 항목의 투명도를 조정하는 데 사용된다. value 1 는 불투명하여 전혀 투명하지 않습니다. value 0.5 는 반투명입니다. value 0 는 완전히 투명합니다. 주어진 값은 일부 투명도가 있는 이미지이든 텍스트 블록의 전경 및 배경 색상이든 전체 요소에 적용됩니다. Link class를 사용하여 앵커 태그의 불투명도를 0.7로 설정하여 선택합니다. Alphabet Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University. Larry Page Sergey Brin
코딩, 프로그래밍 쉽게 시작하는 법 오늘은 요즘 짬짬이 배우고 있는 코딩에 대한 얘기해 보려 한다. 소프트웨어 엔지니어. 흔히들 얘기하는 프로그래머들이 사용하는 컴퓨터 언어. C언어, 파이썬, 자바 등,, 한 번은 들어봤음 직한, 첫 장만 펼쳐도 앞이 깜깜 해지는 녀석들에게 관심이 갔다. 이전부터 '애플리케이션을 내가 만들 수 있으면 꽤 재밌겠다.'라는 생각을 가끔 하긴 했었지만, 최근에서야 미약한 첫걸음을 떼게 되었는데, 프로그래밍을 배우는 방법은 너무나 다양했고, 생각보다 오픈소스(무료 강의)들도 굉장히 많았다. 그래서 이번 포스팅에서는 프로그래밍과는 전혀 무관한 인생을 살아온 평범한 아재가 코딩을 배우기 위해 알아본 방법들과 그중 최소한의 비용(=공짜)으로 진행할 수 있는 방법들을 정리해본다. 코딩..
카드와 같은 요소에 상자 그림자 추가 box-shadow 속성은 요소에 하나 이상의 그림자를 적용합니다. box-shadow 속성은 다음 값을 취합니다. offset-x(요소에서 그림자를 수평으로 밀어내는 거리), offset-y (요소에서 수직으로 그림자를 밀어내는 거리), 흐림 반경, 확산 반경 및 색상, 순서대로. blur-radius 및 spread-radius 값은 선택 사항입니다. 쉼표를 사용하여 각 상자 그림자 요소의 속성을 구분하여 여러 상자 그림자를 만들 수 있습니다. 다음은 대부분 투명한 검정색에서 약간의 흐림 효과가 있는 여러 그림자를 만드는 CSS의 예입니다. box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);..
헤더와 단락 태그의 크기 조정 헤더 태그의 글꼴 크기(h1 ~ h6)는 일반적으로 단락 태그의 글꼴 크기보다 커야 합니다. 이를 통해 사용자는 페이지에 있는 모든 항목의 레이아웃과 중요성 수준을 시각적으로 쉽게 이해할 수 있습니다. font-size 속성을 사용하여 요소의 텍스트 크기를 조정합니다. 제목을 단락보다 훨씬 크게 만들려면 h4 태그의 글꼴 크기를 27픽셀로 변경합니다. Alphabet Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University. Larry Page Sergey Brin
텍스트의 background-color 속성 조절 본문을 쉽게 읽을 수 있도록 전체 배경이나 텍스트 색상을 조정하는 대신 강조하려는 텍스트가 있는 요소에 배경색을 추가할 수 있습니다. 이 챌린지는 16진수 코드나 일반 rgb() 대신 rgba()를 사용합니다. rgba stands for: r = red g = green b = blue a = alpha/level of opacity RGB 값의 범위는 0에서 255까지입니다. 알파 값의 범위는 완전히 불투명하거나 단색인 1부터 완전히 투명한 0까지입니다. rgba()는 불투명도를 조정할 수 있으므로 이 경우에 사용하는 것이 좋습니다. 즉, 배경을 완전히 차단할 필요가 없습니다. 이 챌린지에는 background-color: rgba(45, 45, 45..
hr 요소를 사용하여 수평선 만들기 hr 태그를 사용하여 포함하는 요소의 너비에 가로줄을 추가할 수 있습니다. 이것은 주제의 변경을 정의하거나 콘텐츠 그룹을 시각적으로 구분하는 데 사용할 수 있습니다. 카드 제목이 포함된 h4 아래에 hr 태그를 추가합니다. 참고 : HTML에서 hr은 자체 닫는 태그이므로 별도의 닫는 태그가 필요하지 않습니다. GoogleAlphabet Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University. Larry Page Sergey Brin
s 태그를 사용하여 텍스트 취소선 만들기 수평선이 문자를 가로지르는 경우 텍스트를 취소선으로 표시하려면 s 태그를 사용할 수 있습니다. 텍스트 섹션이 더 이상 유효하지 않음을 나타냅니다. s 태그를 사용하여 브라우저는 CSS의 요소에 line-through text-decoration를 적용합니다. h4 태그 안에 Google을 s 태그로 묶은 다음, 취소선 형식이 없어야 하는 Alphabet이라는 단어를 그 옆에 추가합니다. Google Alphabet Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University. Larry Page Sergey Brin
em 태그를 사용하여 텍스트를 기울임꼴로 표시 텍스트를 강조하려면 em 태그를 사용할 수 있습니다. 브라우저가 font-style: italic의 CSS를 적용하므로 텍스트가 기울임꼴로 표시됩니다. 강조를 주기 위해 단락 태그의 내용 주위에 em 태그를 감쌉니다. Google Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University. Larry Page Sergey Brin
u 태그를 사용하여 텍스트에 밑줄 긋기 텍스트에 밑줄을 긋기 위해 u 태그를 사용할 수 있습니다. 이것은 텍스트의 한 부분이 중요하거나 기억해야 할 부분을 나타낼 때 자주 사용됩니다. u 태그를 사용하여 브라우저는 CSS의 text-decoration: underline;를 요소에 적용합니다. 텍스트 주위에만 u 태그를 감쌉니다. 참고: 링크와 혼동될 수 있는 경우 u 태그를 사용하지 마십시오. 앵커 태그에는 기본 밑줄 서식도 있습니다. Google Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University. Larry Page Sergey Brin
Strong 태그를 사용하여 텍스트를 굵게 만들기 텍스트를 굵게 만들려면 strong 태그를 사용할 수 있습니다. 이것은 종종 텍스트에 주의를 기울이고 중요함을 상징하는 데 사용됩니다. Strong 태그를 사용하여 브라우저는 요소에 font-weight: bold; 를 적용합니다. P 태그안의 'Stanford University' text 를 Strong 태그로 묶으시오. (period를 묶지말 것) Google Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University. Larry Page Sergey Brin
height 속성을 사용하여 요소의 높이 조정 너비 속성과 유사하게 CSS의 height 속성을 사용하여 요소의 높이를 지정할 수 있습니다. 다음은 이미지의 높이를 20px로 변경하는 예입니다. img { height: 20px; } h4 태그에 height 속성을 추가하고 25px로 설정합니다. NOTE : 이 챌린지에서 테스트를 통과하려면 100% 확대/축소가 필요할 수 있습니다. Google Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University. Larry Page Sergey Brin
width 속성을 사용하여 요소의 너비 조정 CSS의 너비 속성을 사용하여 요소의 너비를 지정할 수 있습니다. 값은 상대 길이 단위(예: em), 절대 길이 단위(예: px) 또는 포함하는 상위 요소의 백분율로 제공될 수 있습니다. 다음은 이미지의 너비를 220px로 변경하는 예입니다. img { width: 220px; } 전체 카드에 width 속성을 추가하고 절대값 245px로 설정합니다. fullCard 클래스를 사용하여 요소를 선택합니다. Google Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University. Larry Page Sergey Brin
미디어 쿼리를 사용하여 변수 변경하기 CSS 변수는 미디어 쿼리를 사용하는 방식을 단순화할 수 있습니다. 예를 들어, 화면이 미디어 쿼리 중단점보다 작거나 클 때 변수의 값을 변경할 수 있으며 사용되는 모든 위치에 스타일이 적용됩니다. 미디어 쿼리의 :root 선택기에서 --penguin-size가 재정의되고 200px 값이 지정되도록 변경합니다. 또한 --penguin-skin을 재정의하고 검은색 값을 지정합니다. 그런 다음 미리 보기의 크기를 조정하여 이 변경 사항이 실제로 적용되는지 확인합니다.
Change a variable for a specific area When you create your variables in :root they will set the value of that variable for the whole page. You can then over-write these variables by setting them again within a specific element. Change the value of --penguin-belly to white in the penguin class.
Inherit CSS Variables When you create a variable, it is available for you to use inside the selector in which you create it. It also is available in any of that selector's descendants. This happens because CSS variables are inherited, just like ordinary properties. To make use of inheritance, CSS variables are often defined in the :root element. :root is a pseudo-class selector that matches the ..
Create a custom CSS Variable To create a CSS variable, you just need to give it a name with two hyphens in front of it and assign it a value like this: --penguin-skin: gray; This will create a variable named --penguin-skin and assign it the value of gray. Now you can use that variable elsewhere in your CSS to change the value of other elements to gray. TEST In the penguin class, create a variabl..
https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once Use CSS Variables to change several elements at once CSS Variables are a powerful way to change many CSS style properties at once by changing only one value. Follow the instructions below to see how changing just three values can change the styling of many elements. TEST In the..
https://www.freecodecamp.org/learn/responsive-web-design/basic-css/use-rgb-to-mix-colors Use RGB to Mix Colors Just like with hex code, you can mix colors in RGB by using combinations of different values. TEST Replace the hex codes in our style element with their correct RGB values. ColorRGB Blue rgb(0, 0, 255) Red rgb(255, 0, 0) Orchid rgb(218, 112, 214) Sienna rgb(160, 82, 45) I am red! I am o..