제주코딩베이스캠프 [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] 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 [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
[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] 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 [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