회고록 블로그

이전글 참고하기 2022.04.07 - [2. 개발 공부/HTML+CSS] - [브라우저 공부] 브라우저에서의 HTML+CSS 작동 방식 공부하기 (2) [브라우저 공부] 브라우저에서의 HTML+CSS 작동 방식 공부하기 (2) 이전글 참고하기 2022.04.07 - [2. 개발 공부/HTML+CSS] - [브라우저 공부] 브라우저에서의 HTML+CSS 작동 방식 공부하기 (1) [브라우저 공부] 브라우저에서의 HTML+CSS 작동 방식 공부하기 (1) ※ 필자는 초초 cinnamonc.tistory.com ※ 필자는 초초초보자입니다. 틀린 내용은 언제든지 피드백 부탁드립니다. HTML, CSS, 이미지 파일 등을 통해 웹 페이지를 화면에 보여주는건 동작 방식을 어느정도 이해했지만 그 동작 방식에 자바스..

이전글 참고하기 2022.04.07 - [2. 개발 공부/HTML+CSS] - [브라우저 공부] 브라우저에서의 HTML+CSS 작동 방식 공부하기 (1) [브라우저 공부] 브라우저에서의 HTML+CSS 작동 방식 공부하기 (1) ※ 필자는 초초초초보입니다. 틀린 내용이나 피드백은 언제든지 환영합니다. 한번도 브라우저에서 HTML, CSS, JavaScript가 동작하는 방법에 대해서 공부해본 적이 없다. 웹 프론트엔드를 공부하고 cinnamonc.tistory.com ※ 필자는 초초초보자입니다. 틀린 내용은 언제든지 피드백 부탁드립니다. 기본적인 공부 자료의 출처는 Naver D2 "브라우저는 어떻게 동작하는가?" 입니다. 출처 : https://d2.naver.com/helloworld/59361 ✅ ..

※ 필자는 초초초초보입니다. 틀린 내용이나 피드백은 언제든지 환영합니다. 한번도 브라우저에서 HTML, CSS, JavaScript가 동작하는 방법에 대해서 공부해본 적이 없다. 웹 프론트엔드를 공부하고 있으면서 웹 브라우저에서 언어가 어떻게 동작하는지도 모른다니.. 음계도 모르고 건반으로 연주하는 격이다. (물론 그게 가능한 천재도 있겠지만, 일단 그 천재가 난 아니다) 그래서 HTML과 CSS에 대해서 공부하다보면 한번쯤 궁금해지는 그 내용에 대해서 공부해보려고 한다. 과연 브라우저에서 HTML과 CSS는 어떻게 작동되는 것일까. ✅ '웹 브라우저' 구성 요소 HTML, CSS, JavaScript를 작동시켜주는 웹 브라우저에 대해 먼저 이해 해야할 것 같다. 브라우저(Browser)의 종류는 참 다..

인프런에서 수코딩님의 '만들면서 배우는 HTML/CSS' 강의를 들으며 CSS를 복습하고 있는데, 듣다가 꼭 필기해둬야 할 것 같은 내용을 찾게 되어서 정리해두려고 한다. 만약 태그로 감싼 컨텐츠를 나란히 일렬로 붙여서 정렬하고 싶다면? 아래와 같은 HTML 문서가 있다고 가정하자. 1번 링크 2번 링크 3번 링크 이때 style.css 파일에는 아래와 같은 코드가 적혀있다. .content__list > li{ display: inline-block; height: 52px; border: 1px solid black; border-radius: 50%; } 위의 문서는 태그에 대해서 블록(block)의 성격을 띄면서 inline으로 나란히 배치하도록 했다. (display: inline-block;)..

자바스크립트를 사용하지 않고 HTML과 CSS 만으로 슬라이드 효과를 낼 수 있는 방법이 있다고 해서 스크랩해왔다. 실제 사용해보는 것은 나중에 하기로 하고, 우선 잊어버리지 않기 위해 주소를 스크랩해왔다. 첫번째 방법. m.blog.naver.com/co-nam/222084570760 스크립트 없이 HTML과 CSS로만 만드는 슬라이드효과 /*코딩*/ [HTML+CSS{ 코남} ] #HTML #CSS #INPUT #LABEL#웹 #비쥬얼 #아트 #코딩 #코남#코딩하는남자 #슬라이드효과​... blog.naver.com 두번째 방법. junil-hwang.com/blog/only-css-slide/ Only CSS Slide - 오직 CSS만 사용하여 슬라이드 만들기 - 개발자 황준일 css로 slide..

출처 : dasima.xyz/html-label/ HTML label 태그 for 사용법 및 for 없이 사용법 - TIMECRAFT HTML label 태그 어떻게 사용해야 할까요? input 태그를 설명합니다. input 바깥에 사용할 경우 자동으로 서로 연결됩니다. 따로 사용할 경우 label for 속성을 통해서 값을 지정하고 input 태그에 id 값을 dasima.xyz 자동로그인 위와 같이 사용해도 되고, 자동로그인 위와 같이 사용해도 된다고 한다.

FLEX - 레이아웃을 코드화할 수 있는게 없을까? 해서 나옴 - flex는 container(display, flex-direction, flex-flow 등)와 item(order, flex-grow, flex-basis 등)으로 구성되어 있음 - flex는 부모와 자식 형식으로 되어있어야 함 - flex 사용하기 ※ 반드시 해야하는 작업: 먼저 부모 태그(class명, id명, 태그 등등)의 CSS 내에 display:flex 값을 넣어줘야함 > flex-shrink 도 있는데 설명 생략 Flex : Holy Grail Layout - flex로 holy grail layout 만들어보기 1단계. HTML의 기본 레이아웃 먼저 만들기 2단계. flex 적용하기 (holy grail layout 주의..

font > font-size : 사이즈 지정 > font-family : 폰트 설정 시 사용 (airal, verdana, "Helvertica Neue" 등) * 폰트 사이에 띄어쓰기가 있는 경우 큰따옴표(or 작은따옴표) 필수 * 더 알아보기: opentutorials.org/course/2418/13361 font - 생활코딩 font-family font-family는 서체를 지정하는 속성입니다. 아래와 같은 방법으로 합니다. h1{ font-family: "Times New Roman", Times, serif; } 위 코드의 의미는 h1 태그를 Times New Roman을 지정합니다. 그런데 사용자 opentutorials.org > font-size, font-family 등 속성들을 여..

HTML 공부하다가 궁금한 점이 생겨서 찾아보았다. ※ 본 글은 초급자가 머릿속에서 혼자 고민하고 탐구하여 낸 결론입니다. 따라서, 본 글에 나오는 결론 등은 개인의 추측일 뿐 정답이 아닐 가능성이 99.9% 입니다. 이미지를 태그로 사이즈 조절을 하고, 동시에 CSS로도 사이즈 조절을 하면 어떻게될까? 사전과제. 우선 CSS로 이미지 사이즈(width, height)를 조절할 수 있는지 먼저 확인한다. => 결과: CSS로도 이미지의 사이즈를 조절할 수 있다. 이제, 태그의 속성인 width, height로 이미지의 사이즈를 조절해보자. (CSS도 그대로 둘 것임) 구분이 가능토록 태그에서의 사이즈는 500px로 설정했고 CSS로는 50px로 설정했다. => 결과: CSS에서 설정한 사이즈(width:..

CSS에 대해서 이제 갓 배우기 시작했다. 근데 강의를 듣다가 궁금한게 생겼다. 그래서 답을 찾아보기로 했다. ※ 본 글은 초급자가 머릿속에서 혼자 고민하고 탐구하여 낸 결론입니다. 따라서, 본 글에 나오는 실패 원인 등은 개인의 추측일 뿐 정답이 아닐 가능성이 99.9% 입니다. CSS는 선택자에 따라 스타일을 적용하는 순서(우선순위)가 있을까? 능력자님 해답을 찾아왔다. 출처: jess2.tistory.com/111 [CSS] 선택자 우선순위 CSS 선택자 우선순위 특정 태그에 스타일 속성이 중복될 경우, 어떤 속성이 적용될까? CSS 선택자 우선순위에 대해 알아보자. - 1순위. 속성 값 뒤에 !important를 붙인 속성 - 2순위. HTML에서 style을 지 jess2.tistory.com ..