mynote6676 개발자 노트

웹 서비스의 통신 과정을 간략화하면 다음과 같습니다. (클라이언트) 이용자가 브라우저를 이용하여 웹 서버에 접속합니다.(클라이언트) 브라우저는 이용자의 요청을 해석하여 HTTP 형식으로 웹 서버에 리소스를 요청합니다.(서버)HTTP로 전달된 이용자으이 요청을 해석합니다.(서버) 해석한 이용장의 요청에 따라 적절한 동작을 합니다.리소스를 요청하는 것이라면, 이를 탐색합니다.계좌 송금, 입금과 같은 복잡한 동작을 요구할 경우 내부적으로 필요한 연산을 처리합니다.(서버) 이용자에게 전달할 리소스를 HTTP 형식으로 이용자에게 전달합니다.(클라이언트) 브라우저는 서버에게 응답받은 HTML, CSS,JS 등의 웹 리소스를 시각화하여 이용자에게 보여줍니다.=================================..

목표 시안더보기| index,html 텐코딩 텐코딩 블로그 주도적인 학습에 집중합니다 스스로 문제를 해결하는 능력 찾아서 학습 하는 능력 스스로 재미를 찾아 내는 능력 백엔드 ..

목표 시안더보기 | index.html 텐코딩 텐코딩 블로그 주도적인 학습에 집중합니다 스스로 문제를 해결하는 능력 찾아서 학습 하는 능력 ..

헤더 목표 시안 더보기 | index.html 텐코딩 텐코딩 블로그 | CSS/Style.css* { box-sizing: border-box;}/* a 링크 태그 스타일 초기화 *//* a 태그에 모든 요소를 초기화 한다. */a { all: unset;}a:link { text-decoration: none; color: #3f464d;}a:visited { text-decoration: none; color: #3f464d;}a:active { text-decorat..

|패키지 구조 확인 파비콘 만들어 보기 (파비콘 만들기 검색)https://www.favicon-generator.org/ Favicon & App Icon GeneratorUpload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons.www.favicon-generator.org CSS/nomalize.csshttps://necolas.github.io/normalize.css/ Normalize.css: Make browsers render all elements more consistently.Normalize.css..

CSS 강의 : 반응형 웹 디자인과 Media Query 쉽게 배우기 1. 반응형 웹 디자인이란?- 쉽게 말해요: 반응형 웹 디자인(Responsive Web Design)은 웹 사이트가 사용하는기기에 따라 화면이 예쁘게 보이도록 만드는 기술이에요. 예를 들어, 스마트폰 , 태블릿,컴퓨터에서 모두 잘 보이게 하는 거죠!- 왜 중요할까?요즘은 사람들이 스마트폰으로 웹 서핑을 많이해요.기기마다 화면 크기가 다르니까. 모든 기기에서 웹사이트가 보기 좋도록 조정해야 해요CSS의 Media Query라는 기능을 사용하면 쉽게 가능해요! 2.Media Query가 뭔가요?Media Query는 CSS에서 특정 조건에 따라 스타일을 다르게 적용하는 방법이에요.예를 들어 "화면 크기가 600px이하일 때 이 스..

CSS는 Cascading Style Sheets의 약자로, "Cascading(계단식)"이라는 이름처럼스타일이 여러 규칙에 따라 적용됩니다. CSS에서 스타일이 어떤 순서로 적용되는지(우선순위)와, 부모 요소의 스타일이 자식 요소로 어떻게 전달되는지(상속)에 대해배워보습니다. 1.CSS 상속(inheritance) 이해하기CSS에서 상속이란 부모 요소에 적용된 스타일이 자식요소로 자동으로전달되는 것을 말합니다. 하지만 모든 CSS속성이 상속되는 건 아닙니다.상속되는 속성과 상속되지 않는 속성을 구분하는게 중요합니다. (1) 상속되는 속성일부 CSS 속성은 기본적으로 자식 요소로 상속됩니다. 예를 들어:- color: 텍스트 색상- font-family, font-size: 글꼴 관련 속성- text-..

CSS의 float 속성은 웹 페이지에서 요소를 왼쪽이나 오른쪽으로 "띄워서" 배치하는데 사용됩니다. 주로 이미지나 박스를 텍스트 옆에 배치할 때 유용하죠, 하지만 float를 사용하면 다른 요소의 배치에 영향을 줄 수 있어서 , 이를 정리하기 위해 clear 속성도 함께 사용합니다. 1. CSS Float 속성 이해하기float 속성은 요소를 문서의 일반 흐름에서 벗어나게 해서 왼쪽이나 오른쪽으로 띄우는 역활을 합니다. 주로 이미지와 텍스트를 함깨 배치하거나, 박스를 나란히 배치할 때 사용됩니다. (1) Float 속성 값float 속성은 다음과 같은 값을 가질 수 있습니다.none : 요소를 띄우지 않음(기본 값)left: 요소를 왼쪽으로 띄움.right: 요소를 오른쪽으로 띄움. |실습 예제1 |F..

문서 흐름(Document Flow)이란?HTML 요소는 기본적으로 문서 흐름에 따라 배치됩니다. 이는 다음과 같은 규칙을 따릅니다.-블록 요소(Block Elenents): 한 줄을 모두 차지하며, 수직으로 쌓입니다.(예 : ,,). -인라인 요소(lnline Elements): 한 줄에 나란히 배치되며, 줄 바꿈 없이 옆으로 이어집니다.(예:,,). -기본 흐름: 요소는 HTML에 작성된 순서대로 위에서 아래로 (블록 요소) 또는 왼쪽에서 오른쪽으로(인라인 요소)배치됩니다. 문서 흐름 이해하기 1. 블록 요소 (수직으로 쌓임) 블록 요소 1 블록 요소 2 블록 요소 3 2. 인라인 요소 (수평으로 나란히) 인라인 요소 1 인라인 요소 2 인라인 요소 3 position( 위치 지정..

=====================================================학습 목표CSS의 font 관련 속성(font-family,font-size,font-weight,font-stlye,line-height 등)을 이해하고 활용할 수 있다. 텍스트 스트일을 자유롭게 조정하여 웹 페이지의 가독성과 디자인을 개선할 수 있다.====================================================== 1.1 Font 속성이란?CSS의 font 속성은 텍스트의 모양을 정의하는 데 사용됩니다. 텍스트는 웹 페이지에서 가장 중요한 요소 중하나로, 적절한 스타일랑은 가독성과 디자인에 큰 영향을 미칩니다. 주요 font 관련 속성을 하나씩 살펴 보겠습니다. font-fa..