나의 FE피봇이야기/HTML || CSS (32) 썸네일형 리스트형 [justify-content]space에 대한 나의 정의 space-around는 item 공간 사이가 불균등 space-evenly는 item 공간 사이가 완전히 균등 *관계는 언제나 상대적일것 [background-image]CSS를 통한 배경 이미지 넣기 w <i> Background image의 경우 배경이기 때문에 width와 height가 존재 하지 않음 따라서. , 등 에 background image를 넣을 경우 display를 통해 inline -> inline-block or block(필요시) 변경 후 width와 height를 적용 필요. CSS로 로고 넣기 1.display 2. background => no-repeat(background image의 경우 default가 반복) 3. width와 height 적용 4. background-size를 통해 3번에 맞게 조절 [Position]누가 누가 더 높이 올라가나요? HTML은 사실 Ground floor와 1층으로 나눠진다. 간단히 Ground floor는 body tag라고 생각하면 되고 이외 tags들을 1층의 layer가 올라갔다고 생각해보자 CSS는 HTML의 style해 준다. 그중 POSITION은 층(floor), 다시 말해 layer를 통해 높이를 형성한다. 높이 형성은 점수 계산방식으로 사용하면 이해가 조금은 쉽다. POSITION 1. top, right, bottom, left 2. position 속성이 없는 경우 1 번의 value 사용(이동) 불가 3. Position이 absolute, fixed, sticky 일 경우 right, bottom 사용 가능 4. 기준의 속성명 위치에서 대상의 속성명 위치까지의 거리. 층(점수) : HTML .. [수업1]홈페이지를 만드는 기본 개념 홈페이지라는 것은 결국 나의 피씨(My pc : server)에 있는 내용을 web world(internet)에 올리는 것을 의미한다. FTP File Transfer Protocold의 줄일말로써 내가 할당 받은 hosting (account)에 데이터를 올릴 수 있는 공간. 특징 1) 호스팅 업체마다 'root' 폴더 명칭이 다 다름 ex.html 특징2) root folder 밖에 내용은 web site에 반영 안됨. 번외 index.html로 파일을 만들면 대체적으로 --> main page로 자동 반영. browser는 browse라는 용어로써 뜻은 (가게 안의 물건, 책·신문 등 을) 대강 읽다, 둘러보다 라는 영어뜻을 가지고 있음. web은 책이라는 개념으로 출발한 것으로써 책에서 사용하는.. [CSS]Navigation을 만들때, li tag에 float 그리고 ul사라짐 영상을 보면서 CSS 를 공부하고 있었다. li에 float 를 먹이면 화면에서 ul 영역이 사라짐 .nav ul{ list-style-type: none; background-color: rgb(95, 95, 95); padding : 0px; margin : 0px; overflow: hidden; ---> li에다가 float:left를 먹인 후 overflow:hidden;을 적용하면 보임 } .nav ul a{ color :aliceblue; text-decoration: none; padding : 10px; display: block; text-align : center; } .nav ul a:hover{ background-color: rgb(53, 52, 52); } .nav li{ fl.. [CSS]Display and visibility block : div inline : span div{ background-color : tomato; } span{ bakcgorund-color : aliceblue; } width & height : 100px div{ background-color : tomato; width : 100px; height : 100px; } span{ bakcgorund-color : aliceblue; width : 100px; height : 100px; } Display : inline div{ background-color : tomato; width : 100px; height : 100px; display : inline; } span{ bakcgorund-color : aliceblue; width :.. [HTMl]form&post w enctype 왜 인코딩(endcoding)이 필요한가? Chat GPT에게 물어보니 2가지를 이야기 해줬다. 1. 글씨와 바이너리 데이터를 읽을 수 있어서 2. 영어가 아닌 이상 character 인코딩이 필수 여서 The multipart/form-data encoding, enabled by the enctype attribute, allows the form data to be structured in a way that accommodates both text and binary data. If your form contains non-ASCII characters, such as accented letters or characters from languages other than English, using .. [HTML]Radio button 단일 선택 방법 Radio with Name label을 통해서 라디오 버튼을 묶지 않으면 단일 선택일 할 수 없다. Title Mr. Ms. PhD. 하지만 여기서 각 input에 name="title"로 묶으면 단일 선택으로 변경된다. Title Mr. Ms. PhD. [CSS]Margin collapse into each other Margin서로 상하좌우 충돌할 경우 margin 이 작은쪽이 큰 쪽에 먹힘 1. 상/하 마진이 겹칠때 ==> 무조건 큰쪽 마진으로 사용 2. 빈 요소의 상/하 마진이 겹칠 경우 ==> 빈 요소의 마진 Top or Bottom 1개만 남음(위 아래로 박스에 마진이 붙었을 지라도) 3. 부모 박스와 자식 박스의 상/하 마진이 겹칠때 ==> 무조건 큰쪽 마진으로 사용 - 부모의 마진이 자식의 마진보다 클때 - 부모의 마진이 자식의 마진보다 작을 때 아래 사이트가 설명 잘 해놓음 https://seons-dev.tistory.com/entry/css-Collapsing-Margin The Basic Concepts What’s important to know is : Margin collapse only ha.. [HTML] Loading="lazy" 렌더링 속력 올리기 Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times. From MDN 지연 로딩은 리소스를 비차단(중요하지 않음)으로 식별하고 필요할 때만 로드하는 전략입니다. 이는 중요한 렌더링 경로의 길이를 단축하여 페이지 로드 시간을 단축하는 방법입니다. 적용 지연 로딩은 애플리케이션의 여러 순간에 발생할 수 있지만 일반적으로 스크롤 및 탐색과 같은 일부 사용자 상호 작용.. [HTML]링크를 연결 할 때 키워드 만들기 Link 주의사항 1. 전체 주소를 사용하는 것은 피할 것 2. "여기 클릭(links to)"을 넣는 것은 피할 것. 왜냐하면 우리는 다 알고 있으니까 3. 최대한 간소화해서 넣을 것 4. "Click here"는 피하라. 어떠한 설명도 없이 클릭 이라는 것은 피할 것. 결론 짦게 쓰고 뭐에 대한 것인지 설명할 것 [Front-end]HTML, MarkUp What is Markup Language ? 구조화된 언어를 지칭함 Markup : 마크업(문서의 활자·조판 지정 표시) from Naver. 정리하면 뭔가로 마크업이 되어있는 구조화된 언어(It's describes the text that it's marking up) --> HTML 이라는 것 마크업이란 건 아래의 것을 의미함 , , , 요런식으로 구조화 되어있는 것을 Markup Language 라고 함 HTML's Element is a node as well. Element = node Attribute = class, id etc 속성은 요소에 실제론 나타내고 싶지 않지만 추가적인 내용을 담고 싶을 때 사용합니다. 위에는 나중에 스타일에 관련된 내용이나 기타 내용을 위해 해당 목표를 구분할.. 이전 1 2 다음
