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] 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] 3일차 HTML href로 경로를 지정할 수 있다. sections, grouping content는 텍스트 레벨 요소의 자식으로 사용하지 않지만, 앵커 태그만 예외적으로 사용한다. 앵커 안에 앵커를 넣지 않는다.(자식으로 사용하지 않는다.) 앵커 안에 내용이 있어야 내용을 확인할 수 있다. MDN 사이트를 참고하여 기능 지원을 알 수 있다. <i> 기울임 글꼴을 나타낼 때 사용 <em> 기울임 글꼴을 나타... htmlcsshtmlcss CSS - (2) Float - 3 : float-01 연습 li를 쓰면 항상 이렇게 못생긴 점들이 생긴다. 이렇게 네모가 된다. 으로 설정해주면 된다! 이렇게 땡땡이를 지우고 나니 왼쪽에 디폴트로 padding이 40 붙어있는 것을 볼 수 있다. 가로배치 해주기 Inline 요소 Inline Block 여기서 3가지 옵션이 있는데, 일단 1번은 padding 위아래 값을 줄 수 없으므로 탈락! 그리고 2번, 3번 옵션이 남는데 float 챕터이므로 ... 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] 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] 3일차 HTML href로 경로를 지정할 수 있다. sections, grouping content는 텍스트 레벨 요소의 자식으로 사용하지 않지만, 앵커 태그만 예외적으로 사용한다. 앵커 안에 앵커를 넣지 않는다.(자식으로 사용하지 않는다.) 앵커 안에 내용이 있어야 내용을 확인할 수 있다. MDN 사이트를 참고하여 기능 지원을 알 수 있다. <i> 기울임 글꼴을 나타낼 때 사용 <em> 기울임 글꼴을 나타... htmlcsshtmlcss CSS - (2) Float - 3 : float-01 연습 li를 쓰면 항상 이렇게 못생긴 점들이 생긴다. 이렇게 네모가 된다. 으로 설정해주면 된다! 이렇게 땡땡이를 지우고 나니 왼쪽에 디폴트로 padding이 40 붙어있는 것을 볼 수 있다. 가로배치 해주기 Inline 요소 Inline Block 여기서 3가지 옵션이 있는데, 일단 1번은 padding 위아래 값을 줄 수 없으므로 탈락! 그리고 2번, 3번 옵션이 남는데 float 챕터이므로 ... htmlcsshtmlcss CSS - (5) Media Query HTML5 에서 viewport meta CSS3 에서 Media Query position: fixed;에 대해 배울 때 언급했었다. browser의 화면 크기를 말한다. 반응형 화면을 위해 필수적으로 넣어야 한다! 내 화면이 몇 px 이상/이하 일 때 '이 스타일을 적용해 줘~' 하는 것이다. 위 코드의 경우 768px 이상이면 이렇게 적용해달라는 의미이다. index.html style... htmlcsshtmlcss