제주코딩베이스캠프 [CSS] checkbox와 select 꾸미기 form 양식을 제작할 땐 기본적으로 브라우저 기본 스타일이 적용되어있다. 이때 <input type="checkbox">, <input type="radio">, <select>안에 <option> 이 세가지는 CSS가 먹히지 않아 원하는 디자인으로 꾸밀 수 없게 된다. 그럼 이 3가지는 못꾸미는 것인가...? 물론 아니다. 이번 포스팅에서는 해당 요소들을 꾸미는 방법에 대해 작성하고자 한... 멋쟁이사자처럼CSS제주코딩베이스캠프CSS [CSS] IR기법 IR(Image Replacement) 기법은 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것으로 이는 웹 접근성 준수를 위한 스크린 리더 사용자뿐 아니라 검색 엔진의 효과적인 내용 수집을 위해서도 필요하다. 사용된 이미지내 의미있는 텍스트의 대체 텍스트를 제공할때 Mobile의 color:transparent;는 IE9부터 사용 가능하기 때문에 PC에서는 적용하지 않는다.... 제주코딩베이스캠프CSS멋쟁이사자처럼CSS [HTML/CSS] Day20. Flex(2) 🤷♂️ 아래의 소스 코드에서는 자식 요소에 height:100px를 주고 요소에 각각 width:200px과 flex-basis:200px을 적용시켜보았다. 하지만 아래 이미지에서 볼 수 있듯 .box2는 flex-basis:200px가 적용된 기본 너비 '200px'(빗금친 부분)보다 더 많은 영역(화살표 부분)을 차지하는 것을 볼 수 있다. 이를 보면 width를 적용하면 강제적인 고정값으로 딱... 멋쟁이사자처럼제주코딩베이스캠프htmlcss프론트엔드htmlcss [HTML/CSS] Day18. Position 🪑 이미지를 보면 가장 밑에 normal flow, 중간 쯤 float, 가장 위의 position이 자리잡고 있다. 위의 코드의 결과는 block level Elements은 전체 영역을 다 차지하고, 바로 아래에 inline Elements 2개가 나란히 나열되는 것이 normal flow라고 생각하면 된다. 하지만 float과 position 속성을 사용하면 normal flow보다 더 높... 멋쟁이사자처럼제주코딩베이스캠프htmlcss프론트엔드htmlcss [HTML/CSS] Day19. Flex(1) 😎 flex-direction은 Main-axis의 방향만 정할 뿐 Cross-axis에는 변화를 주지 않는다. 또한 만약 컨테이너 요소 내부에 있는 자식요소에게 width를 주지 않으면 아래의 이미지처럼 한 줄의 영역을 모두 차지하게 되는 특징이 있다. flex-direction의 기본값인 row가 적용되었을 때는 column과 반대로 한 줄 영역을 차지하지 않고 콘텐츠의 영역만큼만 차지하고 ... 멋쟁이사자처럼제주코딩베이스캠프htmlcss프론트엔드htmlcss [Web] Day2. IP/Domain/URL/Port IP/Domain/URL의 기본 개념과 구조 🧬 IP란 컴퓨터 네트워크에서 장치들이 서로를 인식하고 통신을 하기 위해서 사용하는 특수한 번호이다. URL의 안에 포함되는 도메인(Domain)은 IP를 가지는 서버를 사용자가 쉽게 기억하고 찾을 수 있도록 만들어 주는 서비스이다. 컴퓨터와의 통신에서는 숫자로 이루어진 IP를 사용하기 때문에 변환을 시켜주는 도메인 네임 서버(DNS)라는 것이 필... 제주코딩베이스캠프web프론트엔드멋쟁이사자처럼htmlcsshtmlcss [HTML/CSS] Day3. Embedded Contents(1) "웹 접근성"이란 말그대로 "웹에 접근할 수 있는 것"을 말하는데 이는 비장애인은 웹에 접근하는데 문제가 없지만 "시각장애인"이나 "몸이 불편한 장애"인 같은 경우는 웹에 접근하는데 어려움을 겪을 수 있다. <img>태그는 반드시 src(source의 약자)와 alt라는 속성을 반드시 입력을 해야한다. 모든 이미지에 alt의 값이 들어있다면 스크린리더를 이용하는 장애인들은 혼란스러울 수 있다... 제주코딩베이스캠프멋쟁이사자처럼htmlcss프론트엔드htmlcss [HTML/CSS] Day5. CSS Basic 🌷 이러한 불편함을 없애기 위해 태그가 가지고 있는 브라우저별 기본값을 초기화 시켜주는 것이 "reset CSS를 설정한다." 라고 한다. 자세히 배경을 보면 바둑판식으로 배경 이미지가 반복되어 있는 것을 볼 수 있다. 물론 배경이 바둑판식으로 반복되어 적용이 되는 것은 background-repeat:no-repeat로 해결할 수 있으나 background-size:cover를 통해 문제를 바... 빔캠프제주코딩베이스캠프프론트엔드멋쟁이사자처럼htmlcsshtmlcss [Git] Day4. 멘붕의 연속, Git과 github 💾 터미널에 git --version을 입력 후 엔터를 눌려보면 현재 설치되어 있는 버전이 나온다. git add README.md는 commit 파일을 추가하는 것이다. git commit -m "First-commit은 commit을 하고 메세지를 "First-commit"로 하겠다는 뜻이다. 들어가면 아래처럼 파일명을 만드는 입력창과 마크다운을 할 수 있는 영역이 나온다. 파일명을 만드는 ... 제주코딩베이스캠프github프론트엔드멋쟁이사자처럼gitgit [HTML/CSS] Day4. Forms (1) 📝 <Form>의 기본 속성 <form>에 입력을 하고 제출하게 되면 데이터가 서버로 전송이 되고 전송된 데이터는 웹 서버가 처리하며 처리 후 로그인 결과 화면 같은 다른 웹 페이지를 클라이언트에 전송한다. <form>의 동작방식 ⚙️ 웹 페이지에 있는 form에 데이터를 입력 웹 서버는 데이터를 처리하기 위해 APP을 호출 <form>의 속성 method : <form>의 데이터를 전송할 방법... 제주코딩베이스캠프멋쟁이사자처럼htmlcss프론트엔드htmlcss [HTML/CSS] Day4. Embedded Content(2) 미디어 태그는 대표적으로 <iframe> <video> <audio> 이렇게 3개가 있다. : <iframe>은 현재 HTML 페이지에서 또 다른 HTML 페이지를 보여주고 싶을 때 사용한다. 왜냐하면 https는 <iframe>으로 "백도어"를 만들 수 있기 때문에 보안에 취약하기 때문에 막아놓아다고 한다. <iframe>의 속성을 살펴보자. autoplay : 동영상의 자동재생을 설정하는... 제주코딩베이스캠프멋쟁이사자처럼htmlcss프론트엔드htmlcss [HTML/CSS] Day2. Grouping content : Paragraph의 약어, 평범하게 문단을 작성하는데 사용하는 태그이다. : unorder list의 약어, 순서가 상관없는 리스트를 생성하는데 사용한다. 네비게이션을 만드는데 자주 사용되는 태그이다. : order list의 약어, 순서가 중요한 리스트를 생성하는데 사용한다. attribute "type"을 적용하여 앞의 기호 형식을 바꿀 수 있다. ** type= "a, A, i, I... 제주코딩베이스캠프멋쟁이사자처럼htmlcss프론트엔드htmlcss [HTML/CSS] Day2. HTML Sections : 특정한 컨텐츠의 시작 부분을 나타내는 요소. 일반적으로 구역의 제목을 포함, heading 태그와 같이 사용하는 것을 권장한다. 보통 header는 제목이나 네비게이션을 넣어야 할때 많이 사용하는 편이라고 한다. : 보통 페이지의 네비게이션 메뉴를 구성하는데 사용되는 태그. <ul>,<li>와 같이 사용하여 네비게이션을 구성하는 것이 일반적임 <h1>~<h6> : 제목을 지정하기 위해 사... 제주코딩베이스캠프멋쟁이사자처럼htmlcsshtmlcss [HTML] HTML TAG 문서의 타입에 대한 정보를 제공한다. 최상위 요소로 lang="ko"을 통해 문서의 주 언어에 대해 설정한다. HTML 문서에 하나만 있다. HTML 문서에 하나만 있다. HTML 문서의 제목이다. HTML 문서에 반드시 하나만 있다. 해당 문서의 메타데이터를 나타낸다. <meta charset="UTF-8" /> : 문서의 문자 인코딩 상태, 대체로 UTF-8 로 설정하며 전 세계 모든 언... 제주코딩베이스캠프멋쟁이사자처럼htmlhtml [HTML/CSS] Day8. Forms (2) 📝 <form>은 <input> <select> 등에서 사용자의 입력을 거쳐 서버에 데이터를 전송하는 태그이다. <input type="text"> : 기본적인 텍스트를 입력할 수 있다. 다른 <input>과 다르게 type을 설정하는 것이 아닌 자체가 forms 태그인 <select>와 <option>이다. 이는 문자의 평균적인 넓이를 기준으로 하기 때문에 설정한 cols의 값과 출력되는 결과... 제주코딩베이스캠프멋쟁이사자처럼htmlcss프론트엔드htmlcss [HTML/CSS] Day11. 단위(Units) 📏 font-size가 10px로 적용되어 있다. rem : 최상위 요소인 <html>의 글자 크기를 기준으로 한다. 우리는 <html>태그에 기본 font-size를 15px로 설정했다. 그래서 첫번째 빨간색 글씨의 2em은 부모인 <html>의 15px를 받아 15 * 2인 30px로 계산된다. 그리고 두번째 빨간색 글씨인 1.5em은 부모인 "첫번째 글씨"의 크기인 30px을 받아 30 *... 제주코딩베이스캠프멋쟁이사자처럼htmlcss프론트엔드htmlcss [CSS] CSS로 꾸며보자! css에는 px외의 다양한 단위를 사용할 수 있다. px(pixel, 이미지를 표현하는 가장 작은 단위)은 가장 많이 쓰이는 기본 단위로 사용자가 선언한 값을 그대로 표현해 직관적이고 쉽게 사용할 수 있다. background 속성은 배경색을 넣어주는 것뿐만 아니라 이미지도 넣을 수 있다. background-repeat 수치(px, %...)로 값을 주거나 left, right, top, ... 제주코딩베이스캠프CSS멋쟁이사자처럼TILCSS [HTML/CSS] Day10. 마진 겹침 현상, Margin collapsing 🤨 .first에는 margin-bottom이 30px이 설정되어 있고 .second에는 margin-top이 60px이 적용되어 있다. 이를 마진 겹침 현상, Margin collapsing이라고 한다. 정의를 한다면, 인접해 있는 2개의 Block level Elements의 사이에 margin-top 혹은 margin-bottom의 공간이 있을 경우 더 높은 값의 margin이 적용되는 현... 제주코딩베이스캠프멋쟁이사자처럼htmlcss프론트엔드htmlcss [🦁FE DAY8(3)] 표준 CSS 박스 모델 표준 CSS 박스모델에서 요소 전체 크기 = 컨텐츠 + 보더 + 패딩 표준 CSS 박스 모델에서 border의 크기 또한 요소 전체 크기에 포함 된다. border-width thin - 얇은 선으로 지정 thick - 굵은 선으로 지정 border-style border-color border-radius 표준 CSS 박스 모델에서 padding의 크기도 요소 전체 크기에 포함 된다. ma... 빔캠프제주코딩베이스캠프front-end schoolCSS멋쟁이사자처럼CSS [HTML/CSS] Day9. Block Level vs Inline 🧱 HTML하면 빠질 수 없는 Block level Elements, Inline Elements가 드디어 나왔다. Block level Elements와 Inline Elements는 외부의 다른 형제, 부모 박스들과의 배치에 영향을 미치는 외부 디스플레이 타입이다. 또한 Block level Elements나 Inline Elements를 내부에 포함할 수 있다. 아래 이미지를 보면 Bloc... 제주코딩베이스캠프멋쟁이사자처럼htmlcss프론트엔드htmlcss [🦁FE DAY8(2)] CSS Box Model-박스의 구성과 유형 padding box : 콘텐츠와 테두리 사이의 공간. <padding>과 관련 속성으로 크기 조절이 가능하다. : 콘텐츠와 패딩을 둘러싸는 테두리. <boder>와 관련 속성으로 크기와 스타일을 지정할 수 있다. margin box <margin>과 관련 속성으로 크기조절이 가능하다. (이미지 출처: 제주코딩베이스캠프) width, height로 크기조절을 할 수 있다. padding, m... 제주코딩베이스캠프CSS멋쟁이사자처럼front-end schoolCSS [제주코딩베이스캠프] Day-3 웹 서비스 (개발 입문자) 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 코드 한 줄만 입력한다면 별도의 CSS를 구축하지 않고도 예쁜 디자인을 얻을 수 있다. 서비스를 기획 전 '와이어 프레임'을 제작할 수 있는 유용한 툴 와이어 프레임이란? 화면의 레이아웃과 흐름을 설계하는 작업이며, 본격적인 개발 및 디자인 작업 전 뼈대를 잡는 작업이라고 볼 수 있다. 일반 회사에서는 이것은 ... 부트스트랩제주코딩베이스캠프OvenOven [TIL] 실무사용 Tip(많이 쓰거나 실수하는) 여기서 iterable한 값을 받게 되면, 분해해서 넣어줍니다. '가나다' -> '가', '나', '다' 문자열 -> 배열로 전환하는 방법 괄호안의 문자열을 찾아서 구분해주고 배열로 만들어준다.... 멋쟁이사자처럼제주코딩베이스캠프JavaScriptjsJavaScript CSS float 과 overflow / clear fix (내부플로팅 문제해결) 그렇다면 float:right; 을 사용해보자 사라진 .three가 보인다 즉 one에 three부터 끝까지 달라붙어 있고 .two는 자신의 원래위치(.one의 아래쪽)의 오른쪽에서 다시 정렬을 시작하는 것을 알 수 있다. 다시 이상태에서 three 와 four에 각각 float:left와 float:right를 적용시키면 원하는 모양을 만들 수 있을 것이다. 그렇기 때문에 three fou... clearoverflowposition프론트엔드제주코딩베이스캠프멋쟁이사자처럼floatCSShtmlCSS 스크린리더 사용자를 위한 요소배치 스크린 리더 사용자들에게 정확한 정보를 제공함과 동시에 화면을 보는 사용자들에게도 혼선을 주지 않도록 함이다. 내용은 보이지 않지만 html 상에서는 존재해서, 스크린리더가 해당 콘텐츠에 관련된 설명을 읽어 줄 수 있다. 네이버의 메인페이지를 살펴보면 스크린 리더 사용자들을 위해 검색아이콘(돋보기)을 설명해주는 요소를 찾아볼 수 있다. .blind라는 클래스가 있는데 화면에서 보이지도 않고 ... screen reader웹접근성front end프론트엔드스크린리더제주코딩베이스캠프멋쟁이사자처럼CSShtmlCSS
[CSS] checkbox와 select 꾸미기 form 양식을 제작할 땐 기본적으로 브라우저 기본 스타일이 적용되어있다. 이때 <input type="checkbox">, <input type="radio">, <select>안에 <option> 이 세가지는 CSS가 먹히지 않아 원하는 디자인으로 꾸밀 수 없게 된다. 그럼 이 3가지는 못꾸미는 것인가...? 물론 아니다. 이번 포스팅에서는 해당 요소들을 꾸미는 방법에 대해 작성하고자 한... 멋쟁이사자처럼CSS제주코딩베이스캠프CSS [CSS] IR기법 IR(Image Replacement) 기법은 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것으로 이는 웹 접근성 준수를 위한 스크린 리더 사용자뿐 아니라 검색 엔진의 효과적인 내용 수집을 위해서도 필요하다. 사용된 이미지내 의미있는 텍스트의 대체 텍스트를 제공할때 Mobile의 color:transparent;는 IE9부터 사용 가능하기 때문에 PC에서는 적용하지 않는다.... 제주코딩베이스캠프CSS멋쟁이사자처럼CSS [HTML/CSS] Day20. Flex(2) 🤷♂️ 아래의 소스 코드에서는 자식 요소에 height:100px를 주고 요소에 각각 width:200px과 flex-basis:200px을 적용시켜보았다. 하지만 아래 이미지에서 볼 수 있듯 .box2는 flex-basis:200px가 적용된 기본 너비 '200px'(빗금친 부분)보다 더 많은 영역(화살표 부분)을 차지하는 것을 볼 수 있다. 이를 보면 width를 적용하면 강제적인 고정값으로 딱... 멋쟁이사자처럼제주코딩베이스캠프htmlcss프론트엔드htmlcss [HTML/CSS] Day18. Position 🪑 이미지를 보면 가장 밑에 normal flow, 중간 쯤 float, 가장 위의 position이 자리잡고 있다. 위의 코드의 결과는 block level Elements은 전체 영역을 다 차지하고, 바로 아래에 inline Elements 2개가 나란히 나열되는 것이 normal flow라고 생각하면 된다. 하지만 float과 position 속성을 사용하면 normal flow보다 더 높... 멋쟁이사자처럼제주코딩베이스캠프htmlcss프론트엔드htmlcss [HTML/CSS] Day19. Flex(1) 😎 flex-direction은 Main-axis의 방향만 정할 뿐 Cross-axis에는 변화를 주지 않는다. 또한 만약 컨테이너 요소 내부에 있는 자식요소에게 width를 주지 않으면 아래의 이미지처럼 한 줄의 영역을 모두 차지하게 되는 특징이 있다. flex-direction의 기본값인 row가 적용되었을 때는 column과 반대로 한 줄 영역을 차지하지 않고 콘텐츠의 영역만큼만 차지하고 ... 멋쟁이사자처럼제주코딩베이스캠프htmlcss프론트엔드htmlcss [Web] Day2. IP/Domain/URL/Port IP/Domain/URL의 기본 개념과 구조 🧬 IP란 컴퓨터 네트워크에서 장치들이 서로를 인식하고 통신을 하기 위해서 사용하는 특수한 번호이다. URL의 안에 포함되는 도메인(Domain)은 IP를 가지는 서버를 사용자가 쉽게 기억하고 찾을 수 있도록 만들어 주는 서비스이다. 컴퓨터와의 통신에서는 숫자로 이루어진 IP를 사용하기 때문에 변환을 시켜주는 도메인 네임 서버(DNS)라는 것이 필... 제주코딩베이스캠프web프론트엔드멋쟁이사자처럼htmlcsshtmlcss [HTML/CSS] Day3. Embedded Contents(1) "웹 접근성"이란 말그대로 "웹에 접근할 수 있는 것"을 말하는데 이는 비장애인은 웹에 접근하는데 문제가 없지만 "시각장애인"이나 "몸이 불편한 장애"인 같은 경우는 웹에 접근하는데 어려움을 겪을 수 있다. <img>태그는 반드시 src(source의 약자)와 alt라는 속성을 반드시 입력을 해야한다. 모든 이미지에 alt의 값이 들어있다면 스크린리더를 이용하는 장애인들은 혼란스러울 수 있다... 제주코딩베이스캠프멋쟁이사자처럼htmlcss프론트엔드htmlcss [HTML/CSS] Day5. CSS Basic 🌷 이러한 불편함을 없애기 위해 태그가 가지고 있는 브라우저별 기본값을 초기화 시켜주는 것이 "reset CSS를 설정한다." 라고 한다. 자세히 배경을 보면 바둑판식으로 배경 이미지가 반복되어 있는 것을 볼 수 있다. 물론 배경이 바둑판식으로 반복되어 적용이 되는 것은 background-repeat:no-repeat로 해결할 수 있으나 background-size:cover를 통해 문제를 바... 빔캠프제주코딩베이스캠프프론트엔드멋쟁이사자처럼htmlcsshtmlcss [Git] Day4. 멘붕의 연속, Git과 github 💾 터미널에 git --version을 입력 후 엔터를 눌려보면 현재 설치되어 있는 버전이 나온다. git add README.md는 commit 파일을 추가하는 것이다. git commit -m "First-commit은 commit을 하고 메세지를 "First-commit"로 하겠다는 뜻이다. 들어가면 아래처럼 파일명을 만드는 입력창과 마크다운을 할 수 있는 영역이 나온다. 파일명을 만드는 ... 제주코딩베이스캠프github프론트엔드멋쟁이사자처럼gitgit [HTML/CSS] Day4. Forms (1) 📝 <Form>의 기본 속성 <form>에 입력을 하고 제출하게 되면 데이터가 서버로 전송이 되고 전송된 데이터는 웹 서버가 처리하며 처리 후 로그인 결과 화면 같은 다른 웹 페이지를 클라이언트에 전송한다. <form>의 동작방식 ⚙️ 웹 페이지에 있는 form에 데이터를 입력 웹 서버는 데이터를 처리하기 위해 APP을 호출 <form>의 속성 method : <form>의 데이터를 전송할 방법... 제주코딩베이스캠프멋쟁이사자처럼htmlcss프론트엔드htmlcss [HTML/CSS] Day4. Embedded Content(2) 미디어 태그는 대표적으로 <iframe> <video> <audio> 이렇게 3개가 있다. : <iframe>은 현재 HTML 페이지에서 또 다른 HTML 페이지를 보여주고 싶을 때 사용한다. 왜냐하면 https는 <iframe>으로 "백도어"를 만들 수 있기 때문에 보안에 취약하기 때문에 막아놓아다고 한다. <iframe>의 속성을 살펴보자. autoplay : 동영상의 자동재생을 설정하는... 제주코딩베이스캠프멋쟁이사자처럼htmlcss프론트엔드htmlcss [HTML/CSS] Day2. Grouping content : Paragraph의 약어, 평범하게 문단을 작성하는데 사용하는 태그이다. : unorder list의 약어, 순서가 상관없는 리스트를 생성하는데 사용한다. 네비게이션을 만드는데 자주 사용되는 태그이다. : order list의 약어, 순서가 중요한 리스트를 생성하는데 사용한다. attribute "type"을 적용하여 앞의 기호 형식을 바꿀 수 있다. ** type= "a, A, i, I... 제주코딩베이스캠프멋쟁이사자처럼htmlcss프론트엔드htmlcss [HTML/CSS] Day2. HTML Sections : 특정한 컨텐츠의 시작 부분을 나타내는 요소. 일반적으로 구역의 제목을 포함, heading 태그와 같이 사용하는 것을 권장한다. 보통 header는 제목이나 네비게이션을 넣어야 할때 많이 사용하는 편이라고 한다. : 보통 페이지의 네비게이션 메뉴를 구성하는데 사용되는 태그. <ul>,<li>와 같이 사용하여 네비게이션을 구성하는 것이 일반적임 <h1>~<h6> : 제목을 지정하기 위해 사... 제주코딩베이스캠프멋쟁이사자처럼htmlcsshtmlcss [HTML] HTML TAG 문서의 타입에 대한 정보를 제공한다. 최상위 요소로 lang="ko"을 통해 문서의 주 언어에 대해 설정한다. HTML 문서에 하나만 있다. HTML 문서에 하나만 있다. HTML 문서의 제목이다. HTML 문서에 반드시 하나만 있다. 해당 문서의 메타데이터를 나타낸다. <meta charset="UTF-8" /> : 문서의 문자 인코딩 상태, 대체로 UTF-8 로 설정하며 전 세계 모든 언... 제주코딩베이스캠프멋쟁이사자처럼htmlhtml [HTML/CSS] Day8. Forms (2) 📝 <form>은 <input> <select> 등에서 사용자의 입력을 거쳐 서버에 데이터를 전송하는 태그이다. <input type="text"> : 기본적인 텍스트를 입력할 수 있다. 다른 <input>과 다르게 type을 설정하는 것이 아닌 자체가 forms 태그인 <select>와 <option>이다. 이는 문자의 평균적인 넓이를 기준으로 하기 때문에 설정한 cols의 값과 출력되는 결과... 제주코딩베이스캠프멋쟁이사자처럼htmlcss프론트엔드htmlcss [HTML/CSS] Day11. 단위(Units) 📏 font-size가 10px로 적용되어 있다. rem : 최상위 요소인 <html>의 글자 크기를 기준으로 한다. 우리는 <html>태그에 기본 font-size를 15px로 설정했다. 그래서 첫번째 빨간색 글씨의 2em은 부모인 <html>의 15px를 받아 15 * 2인 30px로 계산된다. 그리고 두번째 빨간색 글씨인 1.5em은 부모인 "첫번째 글씨"의 크기인 30px을 받아 30 *... 제주코딩베이스캠프멋쟁이사자처럼htmlcss프론트엔드htmlcss [CSS] CSS로 꾸며보자! css에는 px외의 다양한 단위를 사용할 수 있다. px(pixel, 이미지를 표현하는 가장 작은 단위)은 가장 많이 쓰이는 기본 단위로 사용자가 선언한 값을 그대로 표현해 직관적이고 쉽게 사용할 수 있다. background 속성은 배경색을 넣어주는 것뿐만 아니라 이미지도 넣을 수 있다. background-repeat 수치(px, %...)로 값을 주거나 left, right, top, ... 제주코딩베이스캠프CSS멋쟁이사자처럼TILCSS [HTML/CSS] Day10. 마진 겹침 현상, Margin collapsing 🤨 .first에는 margin-bottom이 30px이 설정되어 있고 .second에는 margin-top이 60px이 적용되어 있다. 이를 마진 겹침 현상, Margin collapsing이라고 한다. 정의를 한다면, 인접해 있는 2개의 Block level Elements의 사이에 margin-top 혹은 margin-bottom의 공간이 있을 경우 더 높은 값의 margin이 적용되는 현... 제주코딩베이스캠프멋쟁이사자처럼htmlcss프론트엔드htmlcss [🦁FE DAY8(3)] 표준 CSS 박스 모델 표준 CSS 박스모델에서 요소 전체 크기 = 컨텐츠 + 보더 + 패딩 표준 CSS 박스 모델에서 border의 크기 또한 요소 전체 크기에 포함 된다. border-width thin - 얇은 선으로 지정 thick - 굵은 선으로 지정 border-style border-color border-radius 표준 CSS 박스 모델에서 padding의 크기도 요소 전체 크기에 포함 된다. ma... 빔캠프제주코딩베이스캠프front-end schoolCSS멋쟁이사자처럼CSS [HTML/CSS] Day9. Block Level vs Inline 🧱 HTML하면 빠질 수 없는 Block level Elements, Inline Elements가 드디어 나왔다. Block level Elements와 Inline Elements는 외부의 다른 형제, 부모 박스들과의 배치에 영향을 미치는 외부 디스플레이 타입이다. 또한 Block level Elements나 Inline Elements를 내부에 포함할 수 있다. 아래 이미지를 보면 Bloc... 제주코딩베이스캠프멋쟁이사자처럼htmlcss프론트엔드htmlcss [🦁FE DAY8(2)] CSS Box Model-박스의 구성과 유형 padding box : 콘텐츠와 테두리 사이의 공간. <padding>과 관련 속성으로 크기 조절이 가능하다. : 콘텐츠와 패딩을 둘러싸는 테두리. <boder>와 관련 속성으로 크기와 스타일을 지정할 수 있다. margin box <margin>과 관련 속성으로 크기조절이 가능하다. (이미지 출처: 제주코딩베이스캠프) width, height로 크기조절을 할 수 있다. padding, m... 제주코딩베이스캠프CSS멋쟁이사자처럼front-end schoolCSS [제주코딩베이스캠프] Day-3 웹 서비스 (개발 입문자) 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 Javascript로 만들어 코드 한 줄만 입력한다면 별도의 CSS를 구축하지 않고도 예쁜 디자인을 얻을 수 있다. 서비스를 기획 전 '와이어 프레임'을 제작할 수 있는 유용한 툴 와이어 프레임이란? 화면의 레이아웃과 흐름을 설계하는 작업이며, 본격적인 개발 및 디자인 작업 전 뼈대를 잡는 작업이라고 볼 수 있다. 일반 회사에서는 이것은 ... 부트스트랩제주코딩베이스캠프OvenOven [TIL] 실무사용 Tip(많이 쓰거나 실수하는) 여기서 iterable한 값을 받게 되면, 분해해서 넣어줍니다. '가나다' -> '가', '나', '다' 문자열 -> 배열로 전환하는 방법 괄호안의 문자열을 찾아서 구분해주고 배열로 만들어준다.... 멋쟁이사자처럼제주코딩베이스캠프JavaScriptjsJavaScript CSS float 과 overflow / clear fix (내부플로팅 문제해결) 그렇다면 float:right; 을 사용해보자 사라진 .three가 보인다 즉 one에 three부터 끝까지 달라붙어 있고 .two는 자신의 원래위치(.one의 아래쪽)의 오른쪽에서 다시 정렬을 시작하는 것을 알 수 있다. 다시 이상태에서 three 와 four에 각각 float:left와 float:right를 적용시키면 원하는 모양을 만들 수 있을 것이다. 그렇기 때문에 three fou... clearoverflowposition프론트엔드제주코딩베이스캠프멋쟁이사자처럼floatCSShtmlCSS 스크린리더 사용자를 위한 요소배치 스크린 리더 사용자들에게 정확한 정보를 제공함과 동시에 화면을 보는 사용자들에게도 혼선을 주지 않도록 함이다. 내용은 보이지 않지만 html 상에서는 존재해서, 스크린리더가 해당 콘텐츠에 관련된 설명을 읽어 줄 수 있다. 네이버의 메인페이지를 살펴보면 스크린 리더 사용자들을 위해 검색아이콘(돋보기)을 설명해주는 요소를 찾아볼 수 있다. .blind라는 클래스가 있는데 화면에서 보이지도 않고 ... screen reader웹접근성front end프론트엔드스크린리더제주코딩베이스캠프멋쟁이사자처럼CSShtmlCSS