멋사TIL CSS 밴딩머신 만들기 코드리뷰 내가 작성한 코드를 해부 당하는 것,.? ul > li 안에 마크업을 <p>로 해주었었다. 해주면서도 li 안에 button을 써주는게 맞을 것 같았지만,,, button 안에 <p> 태그가 들어가면 안된다는 것이 생각이 나서 그냥 1,000원 부분만 button으로 마크업 해주었었다. button 안에 p 태그를 쓸 수 없는 이유는 p 가 block 요소이기 때문이다 ! p 가 안된다면 I... CSS멋사TILhtmlCSS CSS 실무테크닉 & 레티나 대응법 IR 기법은 디자인적으로 보이진 않지만 스크린리더나 브라우저를 위해 정보를 전달하는 텍스트를 html 곳곳에 숨겨두는 방법을 말한다. 위 로그인 폼 디자인에서 input 으로 checkbox 를 만들고 label 에 백그라운드 이미지를 부여했다. [IR 기법 사용전] [IR 기법 사용후] 이 외에도 IR 기법은 다른 쓰임이 있다. 중요한 이미지가 있을 때 이미지 off 시 에도 대체 텍스트를... CSS멋사TILCSS 01. 기초 상식과 HTML Elements Denial of Service attack, 서비스 거부 공격 Distributed Denial of Service attack, 분산 서비스 거부 공격 (누군가 서비스를 디도스당해서 요금폭탄 맞을 수 있음) XHTML이란 웹페이지를 제작하기 위해 사용되는 HTML4(지금 사용하는 HTML living standard의 전 전 버전)를 XML에 맞도록 재정의한 언어 DTD (document... 멋사TILhtmlhtml [CodeLion] Git & Github 🦁 Git : 분산 버전 관리 툴 이때, 코드 뿐만 아니라 코드의 변경 내역까지 모두 가져올 수 있는 버전 관리 도구이다. Setting -> Pages -> main-> save -> 나의 페이지 생성 완! git 의 메인 브런치 = master 일단 저장소(git-test)를 만들어 보자 🤚 여기서 잠깐 아래 그림을 보면 git pull -> git add . -> git commit ->g... 멋사TIL멋사TIL [CodeLion] 03. HTML (Forms) 🦁 웹 페이지에 있는 form 에 data 입력 이때 DB는 물리적으로 별도의 서버일 수 있음 form 에 입력 -> submit 하면 데이터는 서버로 전송됨 -> 전송한 데이터는 웹 서버가 처리 -> 처리 후 결과화면같은 다른 웹페이지를 클라이언트에 전송 method ="post" 로 하면 눈에 보이지 않음 3. input 속성과 type maxlength : 최대 글자 수 지정 minleng... 멋사TIL멋사TIL 04.HTML-블록요소 VS 인라인요소 Block Level 요소란? : 하나의 독립된 덩어리로 화면의 가로 폭 전체를 차지하는 요소 블록요소는 블록요소와 인라인 요소 모두를 포함할 수 있다. <article> , <header>, <nav>, <section>, <div> 등 Inline Level 요소란? : 컨텐츠 자신의 크기만큼 영역을 차지하는 요소. 인라인 요소들은 인라인 요소만 중첩이 가능 <span>,<strong> ... CSShtml멋사TILCSS 03.HTML-Tabular Data : 테이블 형성 . 하나의 테이블 정의 컨테이너 요소로써그 내부에는 제목(caption)과 하나의 행(tr), 열(col) 그리고 셀(td)과 셀의 제목(th)이 자식으로 사용된다 테이블의 제목이나 설명 , 테이블 첫번째 자식으로 사용해야한다 테이블의 크기는 자식컨텐츠에 달려있다. 1-3.<tr>, <th>, <td> <tr> : 테이블의 행을 나눌 때 사용 <td> : <tr> 태그로 나눈... html멋사TILhtml 05. CSS 마진 병합 현상과 해결방법 / Box-sizing : 요소와 요소의 사이에 margin-top 혹은 margin-bottom의 공간이 있을 경우 더 높은 값의 마진 값이 적용되는 현상 형제간의 병합현상을 먼저 보자면 .first 한테는 margin-bottom:30px 을 줬고 ? .second 한테는 margin-top:50px 을 줬지만 지금 둘 사이의 간격은 50px 이다. 즉 .second 의 margin-top:50px 만 값이 들... CSS멋사TILCSS 03. CSS Box Model Content 박스 Padding 박스 : 콘텐츠와 border 사이의 공간 Border 박스 : 콘텐츠와 padding 을 둘러싸는 테두리 Margin 박스 : border 바깥쪽 영역으로 요소와 요소 사이의 공백 역할 블록 박스는 width와 height 속성을 사용하여 스타일링 가능 padding과 margin, border 을 사용하여 스타일을 컨트롤 할 수 있으며 해당 속성들이 다른... CSS멋사TILCSS 02. CSS - 선택자와 우선순위 4가지의 선택자가 있다. 전체선택자 (범용선택자) :0점 type 선택자 : 1점 class 선택자 : 10점 id 선택자 : 100점 아래에서 더 자세히 알아보자구여~ 모든 HTML 요소에 접근이 가능한 선택자 . 으로 표현 자바스크립트 컨트롤에서 많이 씀 선택자 우선순위에는 3가지의 원칙이 있다 구체성의 원칙 중요성의 원칙 동일한 선택자가 연속으로 사용되었을 경우 후자가 우선 이처럼 동일... CSS멋사TILCSS 04. CSS 단위와 Background image ‘화소’ 를 의미하는 Pixel(Picture + Element)의 약자로 디바이스 화면에서 이미지를 표현하는 가장 작은 단위 상대 길이 단위 배수 단위 root em , 즉 최상위 em vh (vertical height) : 화면 높이를 기준으로 하는 백분율 단위 vw (vertical width) : 화면 넓이를 기준으로 하는 백분율 단위 상대 길이 단위 타켓 요소의 너비값과 높이값을 ... CSS멋사TILCSS [CodeLion] 빔캠프님 CSS 특강 TIL🦁 지금 여기에서는 div 가 차지하는 width 를 설정해주지 않았다! margin: initial; 이 가진 초기값을 명시적으로 적어준 것 ( = 0px ) width 는 width: auto; 로 초기값 설정 여기서 margin-left: auto; 를 해주면 여기서 margin-right: auto; 까지 해주면 아래 이미지처럼 전체적으로 보자면 이 페이지는 하나의 덩어리로 볼 수 있다 ... CSS멋사TILCSS
CSS 밴딩머신 만들기 코드리뷰 내가 작성한 코드를 해부 당하는 것,.? ul > li 안에 마크업을 <p>로 해주었었다. 해주면서도 li 안에 button을 써주는게 맞을 것 같았지만,,, button 안에 <p> 태그가 들어가면 안된다는 것이 생각이 나서 그냥 1,000원 부분만 button으로 마크업 해주었었다. button 안에 p 태그를 쓸 수 없는 이유는 p 가 block 요소이기 때문이다 ! p 가 안된다면 I... CSS멋사TILhtmlCSS CSS 실무테크닉 & 레티나 대응법 IR 기법은 디자인적으로 보이진 않지만 스크린리더나 브라우저를 위해 정보를 전달하는 텍스트를 html 곳곳에 숨겨두는 방법을 말한다. 위 로그인 폼 디자인에서 input 으로 checkbox 를 만들고 label 에 백그라운드 이미지를 부여했다. [IR 기법 사용전] [IR 기법 사용후] 이 외에도 IR 기법은 다른 쓰임이 있다. 중요한 이미지가 있을 때 이미지 off 시 에도 대체 텍스트를... CSS멋사TILCSS 01. 기초 상식과 HTML Elements Denial of Service attack, 서비스 거부 공격 Distributed Denial of Service attack, 분산 서비스 거부 공격 (누군가 서비스를 디도스당해서 요금폭탄 맞을 수 있음) XHTML이란 웹페이지를 제작하기 위해 사용되는 HTML4(지금 사용하는 HTML living standard의 전 전 버전)를 XML에 맞도록 재정의한 언어 DTD (document... 멋사TILhtmlhtml [CodeLion] Git & Github 🦁 Git : 분산 버전 관리 툴 이때, 코드 뿐만 아니라 코드의 변경 내역까지 모두 가져올 수 있는 버전 관리 도구이다. Setting -> Pages -> main-> save -> 나의 페이지 생성 완! git 의 메인 브런치 = master 일단 저장소(git-test)를 만들어 보자 🤚 여기서 잠깐 아래 그림을 보면 git pull -> git add . -> git commit ->g... 멋사TIL멋사TIL [CodeLion] 03. HTML (Forms) 🦁 웹 페이지에 있는 form 에 data 입력 이때 DB는 물리적으로 별도의 서버일 수 있음 form 에 입력 -> submit 하면 데이터는 서버로 전송됨 -> 전송한 데이터는 웹 서버가 처리 -> 처리 후 결과화면같은 다른 웹페이지를 클라이언트에 전송 method ="post" 로 하면 눈에 보이지 않음 3. input 속성과 type maxlength : 최대 글자 수 지정 minleng... 멋사TIL멋사TIL 04.HTML-블록요소 VS 인라인요소 Block Level 요소란? : 하나의 독립된 덩어리로 화면의 가로 폭 전체를 차지하는 요소 블록요소는 블록요소와 인라인 요소 모두를 포함할 수 있다. <article> , <header>, <nav>, <section>, <div> 등 Inline Level 요소란? : 컨텐츠 자신의 크기만큼 영역을 차지하는 요소. 인라인 요소들은 인라인 요소만 중첩이 가능 <span>,<strong> ... CSShtml멋사TILCSS 03.HTML-Tabular Data : 테이블 형성 . 하나의 테이블 정의 컨테이너 요소로써그 내부에는 제목(caption)과 하나의 행(tr), 열(col) 그리고 셀(td)과 셀의 제목(th)이 자식으로 사용된다 테이블의 제목이나 설명 , 테이블 첫번째 자식으로 사용해야한다 테이블의 크기는 자식컨텐츠에 달려있다. 1-3.<tr>, <th>, <td> <tr> : 테이블의 행을 나눌 때 사용 <td> : <tr> 태그로 나눈... html멋사TILhtml 05. CSS 마진 병합 현상과 해결방법 / Box-sizing : 요소와 요소의 사이에 margin-top 혹은 margin-bottom의 공간이 있을 경우 더 높은 값의 마진 값이 적용되는 현상 형제간의 병합현상을 먼저 보자면 .first 한테는 margin-bottom:30px 을 줬고 ? .second 한테는 margin-top:50px 을 줬지만 지금 둘 사이의 간격은 50px 이다. 즉 .second 의 margin-top:50px 만 값이 들... CSS멋사TILCSS 03. CSS Box Model Content 박스 Padding 박스 : 콘텐츠와 border 사이의 공간 Border 박스 : 콘텐츠와 padding 을 둘러싸는 테두리 Margin 박스 : border 바깥쪽 영역으로 요소와 요소 사이의 공백 역할 블록 박스는 width와 height 속성을 사용하여 스타일링 가능 padding과 margin, border 을 사용하여 스타일을 컨트롤 할 수 있으며 해당 속성들이 다른... CSS멋사TILCSS 02. CSS - 선택자와 우선순위 4가지의 선택자가 있다. 전체선택자 (범용선택자) :0점 type 선택자 : 1점 class 선택자 : 10점 id 선택자 : 100점 아래에서 더 자세히 알아보자구여~ 모든 HTML 요소에 접근이 가능한 선택자 . 으로 표현 자바스크립트 컨트롤에서 많이 씀 선택자 우선순위에는 3가지의 원칙이 있다 구체성의 원칙 중요성의 원칙 동일한 선택자가 연속으로 사용되었을 경우 후자가 우선 이처럼 동일... CSS멋사TILCSS 04. CSS 단위와 Background image ‘화소’ 를 의미하는 Pixel(Picture + Element)의 약자로 디바이스 화면에서 이미지를 표현하는 가장 작은 단위 상대 길이 단위 배수 단위 root em , 즉 최상위 em vh (vertical height) : 화면 높이를 기준으로 하는 백분율 단위 vw (vertical width) : 화면 넓이를 기준으로 하는 백분율 단위 상대 길이 단위 타켓 요소의 너비값과 높이값을 ... CSS멋사TILCSS [CodeLion] 빔캠프님 CSS 특강 TIL🦁 지금 여기에서는 div 가 차지하는 width 를 설정해주지 않았다! margin: initial; 이 가진 초기값을 명시적으로 적어준 것 ( = 0px ) width 는 width: auto; 로 초기값 설정 여기서 margin-left: auto; 를 해주면 여기서 margin-right: auto; 까지 해주면 아래 이미지처럼 전체적으로 보자면 이 페이지는 하나의 덩어리로 볼 수 있다 ... CSS멋사TILCSS