htmlcss [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 12. flexbox 2 (justify-content) flexbox다루기 flexbox를 다루기 위해 다음과 같은 속성들을 사용할 수 있다. 주축 배치 방법 : justify-content 교차축 배치 방법 : align-items 교차축 개별요소 배치방법 : align-self 줄 바꿈 여부 : flex-wrap flex 컨테이너이기 때무에 가로방향이 기본적인 진행 방향이다. justify-content: center; 주축을 기준으로 가운데... htmlcsshtmlcss [Web] Day2. IP/Domain/URL/Port IP/Domain/URL의 기본 개념과 구조 🧬 IP란 컴퓨터 네트워크에서 장치들이 서로를 인식하고 통신을 하기 위해서 사용하는 특수한 번호이다. URL의 안에 포함되는 도메인(Domain)은 IP를 가지는 서버를 사용자가 쉽게 기억하고 찾을 수 있도록 만들어 주는 서비스이다. 컴퓨터와의 통신에서는 숫자로 이루어진 IP를 사용하기 때문에 변환을 시켜주는 도메인 네임 서버(DNS)라는 것이 필... 제주코딩베이스캠프web프론트엔드멋쟁이사자처럼htmlcsshtmlcss 14. 선택자2(특성 선택자와 결합자) 선택자의 종류 기본 선택자 그룹 선택자 특성 선택자 결합 선택자 의사 클래스 의사 요소 => 특성 선택자, 결합 선택자에 대해 알아보겠습니다. 특성 선택자 1. 컨셉 특성 선택자(속성 선택자)는 주어진 속성의 조냊 여부나 그 값에 따라 요소를 선택한다. => 클래스 속성을 가지고 있는 요소를 선택하기 (상단) => 클래스가 "item"인 요소를 선택하기(하단) 특성 선택자 2. 값 확인 기호... htmlcsshtmlcss 13. flexbox 3 (align-items) align-items: flex-end; align-items: flex-start; align-items: center; align-self: flex-start; align-self: flex-end; display: flex에서 부모의 크기보다 자식의 크기가 커질 경우 .item 3개의 합이 360px 이므로 container보다 커지게 되면 삐져 나가지 않고 자식요소들의 크기를 줄여 ... htmlcsshtmlcss [HTML/CSS] Day3. Embedded Contents(1) "웹 접근성"이란 말그대로 "웹에 접근할 수 있는 것"을 말하는데 이는 비장애인은 웹에 접근하는데 문제가 없지만 "시각장애인"이나 "몸이 불편한 장애"인 같은 경우는 웹에 접근하는데 어려움을 겪을 수 있다. <img>태그는 반드시 src(source의 약자)와 alt라는 속성을 반드시 입력을 해야한다. 모든 이미지에 alt의 값이 들어있다면 스크린리더를 이용하는 장애인들은 혼란스러울 수 있다... 제주코딩베이스캠프멋쟁이사자처럼htmlcss프론트엔드htmlcss 4. display 속성 & border 속성 블록 레벨 요소 vs 인라인 요소 블록 레벨 요소 : 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다. (ex. div, p, h1 등) 인라인 요소 : 자기에게 필요한 만큼의 공간만 차지한다. display 속성 display속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의한다. 블록 레벨 요소인 div 요소를 인라인으로 처리하고 싶을 때 인라인 요소인 a 요소를 블... htmlcsshtmlcss [HTML/CSS] Day1. 간단한 이력서 만들기 오늘은 OT와 기초적인 HTML/CSS를 배울 수 있는 코드라이언의 [일단 만드는 HTML/CSS]를 수강했다. 기초적인 HTML/CSS만 알면 스스로 만들 수 있는 것이라 바로 작성해보았다. HTML 문서의 기본 형태와 태그 ✏️ 기본적으로 HTML이 가지는 형태인데, 크게 <html> <head> <body> 태그로 나눌 수 있다. 최신 브라우저(크롬 등)에서는 <!DOCTYPE html... 코드라이언멋쟁이사자처럼htmlcss프론트엔드htmlcss [HTML/CSS] Day5. CSS Basic 🌷 이러한 불편함을 없애기 위해 태그가 가지고 있는 브라우저별 기본값을 초기화 시켜주는 것이 "reset CSS를 설정한다." 라고 한다. 자세히 배경을 보면 바둑판식으로 배경 이미지가 반복되어 있는 것을 볼 수 있다. 물론 배경이 바둑판식으로 반복되어 적용이 되는 것은 background-repeat:no-repeat로 해결할 수 있으나 background-size:cover를 통해 문제를 바... 빔캠프제주코딩베이스캠프프론트엔드멋쟁이사자처럼htmlcsshtmlcss [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/CSS] 4일차 Git, HTML url에 #id값을 적으면 그 아이디를 가진 태그 위치로 이동한다. 깃헙 깃, 깃헙, 깃냅은 다른 의미를 가지고 있기 때문에 용어 정리를 잘 해줘야 한다. indx.html → 다른 사용자들이 웹 사이트를 방문하듯이 방문하도록. .gitignore 파일에 파일명을 작성하면 push할 때 올라가지 않는다. 이미지를 외부에서 가져와야할 때 인프런 강의 썸네일의 경우 외부 API를 사용하기 때문에... htmlcssgitgit [HTML/CSS] Day7. Background-image에 대해 몰랐던 사실 😎 분명 <body> 태그에 적용한 색은 화면 전체에 적용이 되었는데 콘텐츠의 영역은 콘텐츠인 "행복"만큼의 영역만을 차지하고 있다. 원래 <html> 태그에는 관례상 배경색을 적용하지 않고 대신 <body>에 적용하지만 공부를 위해 적용하자! 그래서 단독으로 <body>태그에 배경색을 적용했을 때 배경색이 화면 전체에 다 차지한 것을 보면 HTML에서는 <body>는 특별 취급을 하고 있다고 ... 빔캠프backgroundhtmlcssyoutubebackground [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 [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 [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 TIL #10 CSS flex 속성 flex: 블록요소와 같이 flex container 정의 (블록요소로 정의) inline-flex: 인라인 요소와 같이 flex container 정의 (인라인 요소로 정의) flex-direction 주 축을 선정 기본값: row 행 축 (좌 → 우) flex-wrap - flex items 묶음 (줄바꿈) 여부 justify-content 주 축의 정렬 방법 기본값 : flex-star... 패스트캠퍼스htmlcsshtmlcss [HTML/CSS] 5일차CSS(이종찬 대표님-빔캠프) 이런 것들을 만드려고 할 때 큰 요소들을 먼저 잡아야 한다. 사람얼굴을 그릴 때 전체적인 형태를 그리고 얼굴을 그리는 것 처럼 웹페이지도 같다. header, main, footer 세덩이 분리된 요소는 백그라운드 컬러를 다르게 해서 시각적으로 분리되어보이게 한다. header는 세덩이 태그가 아니다 초기화 해줄 때 사용하고 값을 지정해줄 때는 개별 class나 id값과 같이 이용해서 주자.... htmlcsshtmlcss [HTML/CSS] 2일차 HTML 미션 1일 1커밋(양도 양이고 질도 질이다) 양이 많아지면 많아질 수록 질도 올라간다고 생각 보안 지식 필수 해킹당하는 사이트 부지기수 VSCode 원하는 폴더에서 바로 열기 원하는 폴더에서 gitbash를 켜고 “code .”을 입력하면 바로 오픈! TextEditor 설명 영상 !+ : html 전체적인 틀 자동완성 crtl+p : 명령팔레트 >snippets html.json <titl... 프론트엔드스쿨htmlcsshtmlcss CSS - (5) Media Query HTML5 에서 viewport meta CSS3 에서 Media Query position: fixed;에 대해 배울 때 언급했었다. browser의 화면 크기를 말한다. 반응형 화면을 위해 필수적으로 넣어야 한다! 내 화면이 몇 px 이상/이하 일 때 '이 스타일을 적용해 줘~' 하는 것이다. 위 코드의 경우 768px 이상이면 이렇게 적용해달라는 의미이다. index.html style... htmlcsshtmlcss
[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 12. flexbox 2 (justify-content) flexbox다루기 flexbox를 다루기 위해 다음과 같은 속성들을 사용할 수 있다. 주축 배치 방법 : justify-content 교차축 배치 방법 : align-items 교차축 개별요소 배치방법 : align-self 줄 바꿈 여부 : flex-wrap flex 컨테이너이기 때무에 가로방향이 기본적인 진행 방향이다. justify-content: center; 주축을 기준으로 가운데... htmlcsshtmlcss [Web] Day2. IP/Domain/URL/Port IP/Domain/URL의 기본 개념과 구조 🧬 IP란 컴퓨터 네트워크에서 장치들이 서로를 인식하고 통신을 하기 위해서 사용하는 특수한 번호이다. URL의 안에 포함되는 도메인(Domain)은 IP를 가지는 서버를 사용자가 쉽게 기억하고 찾을 수 있도록 만들어 주는 서비스이다. 컴퓨터와의 통신에서는 숫자로 이루어진 IP를 사용하기 때문에 변환을 시켜주는 도메인 네임 서버(DNS)라는 것이 필... 제주코딩베이스캠프web프론트엔드멋쟁이사자처럼htmlcsshtmlcss 14. 선택자2(특성 선택자와 결합자) 선택자의 종류 기본 선택자 그룹 선택자 특성 선택자 결합 선택자 의사 클래스 의사 요소 => 특성 선택자, 결합 선택자에 대해 알아보겠습니다. 특성 선택자 1. 컨셉 특성 선택자(속성 선택자)는 주어진 속성의 조냊 여부나 그 값에 따라 요소를 선택한다. => 클래스 속성을 가지고 있는 요소를 선택하기 (상단) => 클래스가 "item"인 요소를 선택하기(하단) 특성 선택자 2. 값 확인 기호... htmlcsshtmlcss 13. flexbox 3 (align-items) align-items: flex-end; align-items: flex-start; align-items: center; align-self: flex-start; align-self: flex-end; display: flex에서 부모의 크기보다 자식의 크기가 커질 경우 .item 3개의 합이 360px 이므로 container보다 커지게 되면 삐져 나가지 않고 자식요소들의 크기를 줄여 ... htmlcsshtmlcss [HTML/CSS] Day3. Embedded Contents(1) "웹 접근성"이란 말그대로 "웹에 접근할 수 있는 것"을 말하는데 이는 비장애인은 웹에 접근하는데 문제가 없지만 "시각장애인"이나 "몸이 불편한 장애"인 같은 경우는 웹에 접근하는데 어려움을 겪을 수 있다. <img>태그는 반드시 src(source의 약자)와 alt라는 속성을 반드시 입력을 해야한다. 모든 이미지에 alt의 값이 들어있다면 스크린리더를 이용하는 장애인들은 혼란스러울 수 있다... 제주코딩베이스캠프멋쟁이사자처럼htmlcss프론트엔드htmlcss 4. display 속성 & border 속성 블록 레벨 요소 vs 인라인 요소 블록 레벨 요소 : 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다. (ex. div, p, h1 등) 인라인 요소 : 자기에게 필요한 만큼의 공간만 차지한다. display 속성 display속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의한다. 블록 레벨 요소인 div 요소를 인라인으로 처리하고 싶을 때 인라인 요소인 a 요소를 블... htmlcsshtmlcss [HTML/CSS] Day1. 간단한 이력서 만들기 오늘은 OT와 기초적인 HTML/CSS를 배울 수 있는 코드라이언의 [일단 만드는 HTML/CSS]를 수강했다. 기초적인 HTML/CSS만 알면 스스로 만들 수 있는 것이라 바로 작성해보았다. HTML 문서의 기본 형태와 태그 ✏️ 기본적으로 HTML이 가지는 형태인데, 크게 <html> <head> <body> 태그로 나눌 수 있다. 최신 브라우저(크롬 등)에서는 <!DOCTYPE html... 코드라이언멋쟁이사자처럼htmlcss프론트엔드htmlcss [HTML/CSS] Day5. CSS Basic 🌷 이러한 불편함을 없애기 위해 태그가 가지고 있는 브라우저별 기본값을 초기화 시켜주는 것이 "reset CSS를 설정한다." 라고 한다. 자세히 배경을 보면 바둑판식으로 배경 이미지가 반복되어 있는 것을 볼 수 있다. 물론 배경이 바둑판식으로 반복되어 적용이 되는 것은 background-repeat:no-repeat로 해결할 수 있으나 background-size:cover를 통해 문제를 바... 빔캠프제주코딩베이스캠프프론트엔드멋쟁이사자처럼htmlcsshtmlcss [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/CSS] 4일차 Git, HTML url에 #id값을 적으면 그 아이디를 가진 태그 위치로 이동한다. 깃헙 깃, 깃헙, 깃냅은 다른 의미를 가지고 있기 때문에 용어 정리를 잘 해줘야 한다. indx.html → 다른 사용자들이 웹 사이트를 방문하듯이 방문하도록. .gitignore 파일에 파일명을 작성하면 push할 때 올라가지 않는다. 이미지를 외부에서 가져와야할 때 인프런 강의 썸네일의 경우 외부 API를 사용하기 때문에... htmlcssgitgit [HTML/CSS] Day7. Background-image에 대해 몰랐던 사실 😎 분명 <body> 태그에 적용한 색은 화면 전체에 적용이 되었는데 콘텐츠의 영역은 콘텐츠인 "행복"만큼의 영역만을 차지하고 있다. 원래 <html> 태그에는 관례상 배경색을 적용하지 않고 대신 <body>에 적용하지만 공부를 위해 적용하자! 그래서 단독으로 <body>태그에 배경색을 적용했을 때 배경색이 화면 전체에 다 차지한 것을 보면 HTML에서는 <body>는 특별 취급을 하고 있다고 ... 빔캠프backgroundhtmlcssyoutubebackground [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 [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 [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 TIL #10 CSS flex 속성 flex: 블록요소와 같이 flex container 정의 (블록요소로 정의) inline-flex: 인라인 요소와 같이 flex container 정의 (인라인 요소로 정의) flex-direction 주 축을 선정 기본값: row 행 축 (좌 → 우) flex-wrap - flex items 묶음 (줄바꿈) 여부 justify-content 주 축의 정렬 방법 기본값 : flex-star... 패스트캠퍼스htmlcsshtmlcss [HTML/CSS] 5일차CSS(이종찬 대표님-빔캠프) 이런 것들을 만드려고 할 때 큰 요소들을 먼저 잡아야 한다. 사람얼굴을 그릴 때 전체적인 형태를 그리고 얼굴을 그리는 것 처럼 웹페이지도 같다. header, main, footer 세덩이 분리된 요소는 백그라운드 컬러를 다르게 해서 시각적으로 분리되어보이게 한다. header는 세덩이 태그가 아니다 초기화 해줄 때 사용하고 값을 지정해줄 때는 개별 class나 id값과 같이 이용해서 주자.... htmlcsshtmlcss [HTML/CSS] 2일차 HTML 미션 1일 1커밋(양도 양이고 질도 질이다) 양이 많아지면 많아질 수록 질도 올라간다고 생각 보안 지식 필수 해킹당하는 사이트 부지기수 VSCode 원하는 폴더에서 바로 열기 원하는 폴더에서 gitbash를 켜고 “code .”을 입력하면 바로 오픈! TextEditor 설명 영상 !+ : html 전체적인 틀 자동완성 crtl+p : 명령팔레트 >snippets html.json <titl... 프론트엔드스쿨htmlcsshtmlcss CSS - (5) Media Query HTML5 에서 viewport meta CSS3 에서 Media Query position: fixed;에 대해 배울 때 언급했었다. browser의 화면 크기를 말한다. 반응형 화면을 위해 필수적으로 넣어야 한다! 내 화면이 몇 px 이상/이하 일 때 '이 스타일을 적용해 줘~' 하는 것이다. 위 코드의 경우 768px 이상이면 이렇게 적용해달라는 의미이다. index.html style... htmlcsshtmlcss