현우의 개발상자

용어해설은 밑에 있습니다(본문 글에서 파란색으로 표시한 용어들). 참고하면서 읽어주세요! 1. 요약 정리 GET(기본값) url에 포함되어 전달 문자열만 전달가능 길이제한 O 멱등성이 있다. GET 메소드는 주로 데이터를 읽거나(Read) 검색(Retrieve)할 때에 사용됨 (GET요청으로 목록을 불러옵니다. 이 행위를 여러 번 수행한다고, 서버의 상태가 변하지도 않고 //단순히 조회만 하므로//, 같은 효과를 기대할 수 있습니다. //요청한 데이터 목록을 조회하는 효과//) POST body에 숨겨져서 전달 문자열 + 바이너리 길이제한 X 멱등성이 없다. POST 메소드는 주로 새로운 리소스를 생성(create) 할 때 사용됨 (데이터를 가져오기보다, 서버의 데이터를 수정하는 목적) 2. 추가 조사 ..

Apply & Feeling (적용 및 느낀 점) *, *:after, *:before { position: relative; box-sizing: border-box; } body { background: white; } .wrap { display: flex; justify-content: center; align-items: center; min-height: 100vh; } .hyunwoo { position: absolute; width: 500px; height: 380px; border-radius: 200px; animation: zoomIn 7s infinite reverse; } @keyframes zoomIn { 0% { transform: scale3d(2.5, 2.5, 2.5); ..

Apply & Feeling (적용 및 느낀 점) 환영합니다 최현우님! 로그아웃 2023.02.27의 비밀일기 제목 내용 작성하기 이는 청춘의 것은 그들의 운다.2023.02.24.THU Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio odit voluptates adipisci, dolores ipsum reprehenderit, numquam minus tempora sapiente, asperiores hic eos nisi ad? Odit, dolore? Consequuntur voluptatum quo perferendis. Excepturi dolor quidem totam minus dolore sunt optio, omnis ..

Findings (배운 점) form form 태그는 입력한 데이터를 제출, 전송하기 위해 사용하는 태그입니다. 별도 제출할 필요가 없다면 form 태그를 사용하지 않으셔도 됩니다 label 사용자 인터페이스의 항목을 나타냅니다. input과 함께 사용해 주세요! 스크린리더기에서 입력해야 하는 내용이 무엇인지 사용자에게 쉽게 이해할 수 있게 합니다. label을 클릭하여 input에 포커스를 이동시키거나 활성화시킬 수 있습니다. 아이디 -------------------------------------------------------------- 아이디 미디어 쿼리 @media 미디어 특성 width: 스크롤바를 포함한 뷰포트의 너비 min-width, max-width 최소 최대 너비 height : ..

Findings (배운 점) animation JavaScript 없이 요소에 애니메이션 효과를 적용할 때 사용한다. 애니메이션을 나타내는 CSS 스타일과 애니메이션의 중간 상태를 나타내는 키프레임들로 이루어진다. transition vs animation transition의 경우 요소의 상태가 변경되어야 애니메이션을 실행할 수 있지만, animation 속성은 요소의 상태 변화와 관계없이 애니메이션을 실행할 수 있다. @keyframes 0%(from)는 시작점, 100%(to)는 종료지점을 의미한다. /* [ from ~ to 속성 ] */ @keyframes animation-name { from {} to {} } /* [ 0% ~ 100% 속성 ] */ @keyframes animation-n..

Findings (배운 점) Grid 두 방향(가로-세로) 레이아웃 시스템 (2차원) 🙌 flex는 한 방향 레이아웃 시스템 (1차원) 용어정리 https://yamoo9.gitbook.io/css-grid/css-grid-term 한 눈에 살펴보는 Grid 용어 - CSS Grid Layout Guidebook 그리드의 행/열을 그리는 선을 말하며, 각 선은 라인 넘버를 갖습니다. 그리드 아이템을 배치하는 기준으로 사용됩니다. yamoo9.gitbook.io 위 사이트에서 너무나도 이해하기 쉽게 정리했다. (글쓴이의 복습과 여러분의 이해를 돕기 위해!!) grid-container에 사용하는 속성 grid-template-columns 열 방향 그리드 트랙의 사이즈를 설정합니다. .container {..

웹접근성? 웹사이트에서 제공하는 정보를 차별 및 제한 없이 동등하게 이용할 수 있도록 보장하는 것 여기서 정보를 차별 및 제한없이 동등하게 제공한다는 것은 신체적 조건이나 환경적 조건에 관계 없이 제공해 달라는 것을 의미한다. 신체적 조건 - 장애인 및 고령자를 포함한 모든 사람 환경적 조건 - 다양한 platform 및 Device와 웹 브라우저 등 모든 환경 웹접근성 향상을 위한 방법 1. W3C 산하 기구인 WAI에서 권고하고 있는 웹 콘텐츠 접근성 지침인 WCAG를 준수 하는 것 2. 웹 서비스를 제작할 때 웹표준 기술을 활용하는 것 웹접근성 지침 웹사이트 / 애플리케이션에서 충족해야 되는 기준을 정의, 즉 웹 서비스를 제작하는 사람들이 개발과정에서 고려해야 될 요구사항이 바로 접근성 지침이다. ..

브라우저 렌더링 렌더링? 렌더링이란? HTML, CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말한다. 렌더링 과정 1단계) DOM, CSSOM 트리 생성 사용자가 브라우저를 통해 웹사이트에 접속하면, 서버로부터 HTML, CSS 등 웹 사이트에 필요한 리소스를 다운로드한다. 브라우저가 페이지를 렌더링 하려면, 먼저 HTML 코드는 DOM, CSS는 CSSOM 트리를 생성해야 한다. DOM? 텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링 하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱 하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다...