Dongi_coding 동기_코딩

안녕하세요 동기 여러분! 오늘은 색을 나타나는 또 하나의 방법 HSL에 대해 알아봅시다! HSL HSL 무슨 총 이름 같이 생겼는데 색을 나타내는 CSS의 기능입니다. Hue는 색깔, 빛깔, 색조, Saturation은 포화도, Lightness는 밝기라는 의미를 가지고 있습니다. 생김새와 정의 color: hsl(50, 70%, 30%); hsl바로 옆에 나오는 숫자가 바로 hue의 값입니다. hue는 0부터 360까지의 색을 가지고 있는데 빨강 계열은 0, 노랑 계열은 60 초록 계열은 120 파랑 계열은 240, 다시 빨강 계열은 360에 가까울수록 비슷한 색이 나옵니다. 두 번째로 나오는 퍼센트의 값이 saturation의 값입니다. saturation이 여기서는 '채도'입니다. 채도는 색의 선명..

안녕하세요 동기 여러분! 이번 포스팅에서는 Clear에 대해 알아봅시다! Clear Clear 프로퍼티는 'bump'(

안녕하세요 동기 여러분! 오늘은 float 프로퍼티에 대해 알아봅시다! Float 영어사전에 float을 찾아보면 (액체위에) '띄우다'라는 뜻이 있습니다. 우리는 웹 페이지에 왼쪽이나 오른쪽 어디에 '요소를 띄우다'라고 생각하고 공부하면 좋을 것 같습니다. (보통 이미지와 텍스트를 한 컨테이너에 담고 싶을 때 사용합니다.) float 프로퍼티에는 총 4 가지의 프로퍼티가 있습니다. 아래의 표를 봅시다. float의 값 설명 left 해당 요소의 컨테이너 왼쪽으로 띄웁니다. right 해당 요소의 컨테이너 오른쪽으로 띄웁니다. none 기본 값. inherit 부모 요소의 float 값을 상속 받습니다. 컨테이너는 여러 요소를 담을 수 있는 큰 박스를 말합니다. 그림을 정말 못 그렸는데 이 그림은 flo..

안녕하세요 동기 여러분! 오늘은 디스플레이 세 번째 시간으로 인라인 블록에 대해 알아봅시다! Display: Inline-Block 인라인 블록(Inline-Block)은 인라인과 블록을 합쳐 놓은 혼종입니다. (아몬께서 만드신) width와 height를 이용해서 블록의 크기를 정하고 그 블록들을 가로로 나열 할 수 있게 합니다. 생김새와 작동 아래의 코드를 실행해보겠습니다. 혼종1 혼종2 혼종3 /* CSS */ div { font-size: 50px; color: aliceblue; width: 300px; height: 300px; background-image: url("https://w.namu.la/s/47ec9f11f341310729db986719fdba6d85fb18c8a5194c6d05..

안녕하세요 동기 여러분! 오늘은 디스플레이 프로퍼티의 값인 블록에 대해 알아봅시다! Display: Block 어제는 필요한 만큼만 가로의 공간을 차지하고 그 옆에 다른 요소들이 올 수 있게 하는 HTML의 요소들을 알아보았는데 오늘은 오면 바로 가로의 공간을 다 차지하는 블록 레벨 요소(Block-level element)들을 표로 정해보았습니다. 태그 설명 연락처 글, 기사 내용 어사이드 내용 (설명이나 따로 추가할 내용에 주로 씀) 긴 블록 형태의 인용문 (CSS로 설정해줘야 효과가 들어감) 사용자의 행동에 의해 보이거나 숨길 수 있는 정보를 담음 ( 태그와 기능은 비슷 ) 눌러줘 숨은 정보 등장 대화 상자 - Firefox, Internet Explorer 디스크립션 리스트에 있는 용어 설명 문서..

안녕하세요 동기 여러분! 오늘부터 인라인 디스플레이를 알아봅시다! Inline DIsplay 모든 HTML의 요소는 디스플레이의 기본 값을 가지고 있는데 그 값은 이게 가로의 공간을 다른 요소들과 공유할 수 있는지 없는지 관여하게 됩니다. 어떤 요소들은 내용의 크기와 상관없이 브라우저의 왼쪽 부터 오른쪽까지 다 채우게 되고 또 어떤 요소들은 내용이 필요한만큼만 가로의 공간을 차지하고 그 옆에 다른 요소들이 올 수 있게 합니다. 필요한만큼만 가로의 공간을 차지하고 그 옆에 다른 요소들이 올 수 있게 합니다??? 필요한만큼만 가로의 공간을 차지하고 그 옆에 다른 요소들이 올 수 있게 하는 요소를 표로 정리해보았습니다. 태그 설명 The Anchor element / href 속성과 함께 쓰이며 웹 페이지, ..

안녕하세요 동기 여러분! 오늘은 Z-Index에 대해 알아봅시다! Z-Index 혹시 어도비의 일러스트레이터를 사용하시는 분이면 'ctrl + [ or ]'이라는 단축키를 알고 계실 겁니다. 이렇게 두 도형이 겹쳐져 있는데 분홍색 직사각형이 노란색 직사각형 위에 있습니다. 이때 분홍색 직사각형을 클릭하고 'ctrl + ['를 누르면 분홍색 직사각형이 아래로 내려갑니다. 네 ~ 이런 기능이 CSS에도 있는데 그게 바로 z-index입니다. z-index 정의와 사용방법 z-index는 요소의 겹쳐지는 순서를 정합니다. z-index의 값은 높아질 수록(숫자가 높을수록) 위에 배치됩니다. (위에 두 번째 스크린샷에 노란 직사각형이 z-index값이 2라면 분홍 직사각형은 1) ※ z-index는 오직 포지션..

안녕하세요 동기 여러분! 오늘은 포지션 프로퍼티의 값인 스티키에 대해 알아봅시다! Position: Sticky 혹시 라이언 일병 구하기라는 영화를 보신적이 있나요? 거기에 보면 보병들이 독일군의 탱크를 불능 상태로 만들기 위해 스티키 범(Sticky Bomb)이라는걸 만들어서 작전에 사용하는데 보병들이 탱크가 공격할 수 없는 사각지대로 몰래 접근하여 탱크의 무한궤도(탱크 바퀴)에 폭탄을 붙이고 달아납니다. 그러면 폭탄이 터지고 탱크는 움직일 수가 없는 상태가 되죠. 네 ~ sticky의 뜻인 '끈적거리는, 달라붙는'을 말하고 싶어서 영화 이야기를 해보았습니닼ㅋㅋㅋ 오늘 알아볼 Sticky도 달라붙는 친구이기 때문에 뜻을 유념하면서 가봅시다~ Position: Sticky는 fixed와 비슷한 기능을 가..

안녕하세요 동기 여러분! 오늘은 포지션 프로퍼티의 값인 픽스드에 대해 알아봅시다! Position: Fixed Fixed는 영어사전에 찾아보면 '고정된'이라는 뜻을 가지고 있다. 그렇다 이 녀석은 요소를 내가 정한 위치에 고정시켜 주는 녀석이다. -> 이 말은 웹 페이지가 커지든 작아지든 스크롤을 내리든 올리든 상관없이 요소가 정해진 자리에 고정된다는 소리 진짜 고정이 되는지 해봅시다. 난 모르는 사람 난 부모 난 자식 /* CSS */ div { border: 8px solid palevioletred; margin: 20px; } #parent { height: 5000px; /*

안녕하세요 동기 여러분! 오늘은 포지션의 프로퍼티의 값인 엡솔루트(보드카)에 대해 알아보도록 합시다! Position: Absolute HTML의 요소 위치를 지정하는 방법이 다섯 가지가 있는데 그중 한 가지가 Absolute이다. Absolute absolute를 영어사전에서 찾아보면 형용사로는 '완전한, 완벽한' 명사로는 '절대적인 것'이라는 뜻이 있다. 그렇다. position: absolute는 절대적인 파워로 요소를 움직이는 것이다. 아래의 코드와 실행화면을 보자. 난 모르는 사람 난 부모 난 자식 /* CSS */ div { border: 8px solid palevioletred; margin: 20px; } #child { position: absolute; } 포지션의 값을 엡솔루트로 설..