본문 바로가기

분류 전체보기48

[퍼블]html5의 semantic 태그 활용방법 HTML5에서 시맨틱 태그가 도입된 이유는 웹 콘텐츠의 의미와 구조를 더 명확하게 정의하고 검색 엔진, 웹 브라우저, 스크린 리더 등의 사용자 에이전트가 콘텐츠를 더 잘 이해하고 해석할 수 있도록 하기 위함입니다. 명시적인 시맨틱 마크업을 사용하면 웹 페이지의 구조가 더 의미 있는 방식으로 표현되며, 이는 웹 접근성, SEO(Search Engine Optimization), 콘텐츠 분석, 미래 호환성 등 여러 가지 이점을 제공합니다. header, footer : 웹 페이지의 머리말과 꼬리말을 정의하기 위해 도입되었습니다. 이러한 태그를 사용하면 웹 페이지의 주요 제목과 페이지 하단의 저작권 정보 또는 연락처와 같은 내용을 명확하게 구분할 수 있습니다. nav : 주요 탐색 링크와 메뉴를 감싸기 위해 .. 2023. 10. 24.
[퍼블]CSS 레이아웃 가로배치 float none-> 속성 적용 x(디폴트값) left -> 박스를 왼쪽으로 배치 right -> 박스를 오르 쪽으로 배치 margin : auto -> 박스를 중앙으로 배치(block요소만 가능함, inline, inline-block요소는 불가능함) text-align:center -> inline, inline-block요소를 중앙으로 보내려고 할 경우에는 부모 요소에 해당 속성값을 주면 됨 .parent{ border: 5px solid; width: 600px; } .child{ background-color: blue; width: 200px; height: 300px; float: left; } 윗 html 태그와 css를 적용했을 경우에는 자식 요소가 공중에 붕 떠서 left 된 느낌이기.. 2023. 10. 24.
[퍼블] 인라인, 블록, 인라인블록 요소 인라인 요소 한 줄에 줄 바꿈이 되지 않고 여러 개 배치 가능 value값에 따라 width값이 결정됨 width과 heigh값을 주어도 적용 x 상하 margin는 적용 x(좌우는 가능) audio, b, br, del, em, span, small, strong, sub, sup, u, video, audio, mark, sup ... 블록요소 한 줄에 한 개만 배치 가능 기본 고정으로 너비값은 100% width heigh 값 적용 가능 상하좌우 margin 가질 수 있음 전체적인 레이아웃을 잡는데 많이 쓰임 div, hr, h1~6, table, figure, header, nav, footer, section, article, aside, p, ol, ul, li, td, th, form, f.. 2023. 10. 19.
[퍼블] html 박스를 디자인 하기 위한 CSS-3(그림자) html에서 그림자 효과를 주기 위해서는 크게 2가지가 있다 박스에 그림자 효과 주기 -> box-shadow 텍스트에 그림자 효과 주기 -> text-shadow shadow 효과를 주기 위해서는 value 값을 3개를 줘야 하는데, x, y, 퍼짐 색상 순으로 주면 된다 ex) test .test{ border: 5px solid red; width: 100px; height: 100px; box-shadow: 5px 5px 20px black; } .text{ font-size:100px; text-shadow: 5px 5px 20px black; } 해당 html 결과를 보면 저런 식으로 노출이 됩니다. 하지만 box-shadow에 inset조건을 준다면 그림자 효과가 안으로 가게 됩니다. .te.. 2023. 10. 19.
[웹기초] 인터넷 네트워크 이 글은 인프런 김영한 강사님에 모든 개발자를 위한 http웹 기본지식의 강의 내용을 바탕으로 작성되었습니다. 모든 개발자를 위한 HTTP 웹 기본 지식 - 인프런 | 강의 실무에 꼭 필요한 HTTP 핵심 기능과 올바른 HTTP API 설계 방법을 학습합니다., [사진] 📣 확인해주세요!본 강의는 자바 스프링 완전 정복 시리즈의 세 번째 강의입니다. 우아한형제들 최연소 기술 www.inflearn.com 기본적으로 인터넷 통신을 할 경우 서버에서 클라이언트에게 메시지를 전달하기 위해서는 수많은 노드를 거쳐가야 합니다. 수많은 노드 사이에 정확하게 서버나 클라이언트에게 메시지가 정확하게 전달되려면 ip 프로토콜 이란 것을 활용해야 합니다. -ip 프로토콜이란? 먼저 통신을 하기 위해서는 클라이언트와 서버는.. 2023. 10. 19.
[spring] 스프링 입문 - > 회원 웹 기능 - 조회 이 글은 인프런의 김영한 강사님의 스프링 입문- 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술의 강의 내용을 바탕으로 작성되었습니다. [무료] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 - 인프런 | 강의 스프링 입문자가 예제를 만들어가면서 스프링 웹 애플리케이션 개발 전반을 빠르게 학습할 수 있습니다., 스프링 학습 첫 길잡이! 개발 공부의 길을 잃지 않도록 도와드립니다. 📣 확인해주세 www.inflearn.com package hello.hellospring.controller; import hello.hellospring.domain.Member; import hello.hellospring.service.MemberService; import org.sp.. 2023. 10. 19.