HTML

안녕하세요! 지난 시간에는 객체 지향 프로그래밍에 대해 알아봤는데요오늘부터는 웹 개발의 기초가 되는 기술들에 대해 알아볼게요!먼저 HTML부터 시작해볼까요? 😊💡 HTML이란 무엇인가요?HTML(HyperText Markup Language)은 웹페이지의 구조를 만드는 마크업 언어예요.쉽게 말해 웹페이지의 '뼈대'를 만드는 기술이죠!웹페이지 3요소웹페이지는 크게 세 가지 기술로 구성됩니다:HTML: 구조 (뼈대)CSS: 디자인 (옷과 화장)JavaScript: 동작 (근육과 신경)실생활 예시: 집 짓기HTML은 집을 지을 때의 구조설계와 같아요:벽돌, 기둥, 문, 창문 등 기본 구조물 배치각 공간의 용도 정의 (거실, 주방, 침실 등)공간 간의 연결 관계 설정 🏗️ HTML 문서의 기본 구조 HTM..

제목 그대로입니다. 저 속성들을 사용하는 이유와 보안 이슈에 처리하는 방법 마지막으로 SEO에 연관되는 방법 이렇게 3가지를 알아볼게요 제가 모르니까 주제로 들고 와서 하는 거예요 저도 취업이란 걸 해서 알려주고 싶거든요 ㅎㅎ 사용 이유 및 보안 이슈에 처리하는 방법 noreferrer - 링크를 클릭할 때 참조 정보를 전송하지 않도록 하는 경우 사용해요 개인정보 보호나 보안을 위한 조치로, 웹 사이트의 추적을 방지하기도 합니다 noopener - 새 창이나 탭에서 열린 링크가 원래 페이지를 조작할 수 없도록 하는 경우 보안 이슈를 예방하는데 중요하며, 주로 target="_blank"를 사용할 때 사용해요 nofollow - 검색 엔진이 이 링크를 따라가지 말라는 지시예요 SEO에 연관되어, 보통은 스..

오늘은 제가 또 궁금해서 가져온 내용이에요 반응형 디자인에서 미디어 쿼리를 최소화하는 방법은 무엇인가 그래서 좀 찾아보니 방법이 몇 가지 있더라구요 그걸 좀 적어볼게요 너무 당연한 소리겠지만 코드의 복잡성이 줄어든다면 유지 관리를 간소화하는 데 충분한 도움을 줄 수 있죠 4가지 정도의 방법이 대표적인거 같은데 그거 먼저 알려드릴게요 1. 상대적 단위 사용 상대적 단위(em, rem % 등)를 사용하면 요소의 크기를 부모 요소나 뷰포인트 크기에 맞게 조정할 수 있어요 이 방법은 미디어 쿼리를 사용하지 않고도 레이아웃을 유동적으로 만들 수 있는거죠 2. CSS Grid 또는 Flexbox 사용 Grid와 Flexbox는 반응형 레이아웃을 만드는데 유용한 아이들이죠 요소의 크기와 위치를 자동으로 조정해서 다양..

animation 최적화 기법이 뭘까요.. 스터디를 같이 하는 사람들과 얘기를 하다 나온 말이었어요 그래서 블로그에 한 번 적어나 봐야겠다 했던 내용인데 부족하지만 적어볼게여 정말 간단하게 말을 해보자면 웹사이트에서 애니메이션을 더 효율적으로 동작하게 하는 여러 방법을 말해요 여러 방법이라고 하니 당연히 방법이 하나가 아닌 상황에 맞는 여러 방법이 있는 거죠 이렇게 최적화 기법을 사용하면 웹사이트의 성능을 향상하고 사용자 경험을 개선하는데 도움이 됩니다 대표적인 방법으로는 1. GPU 가속 활용 2. will-change 속성 사용 3. 요청 애니메이션 프레임 4. 애니메이션 복잡성 줄이기 이렇게 있는데 오늘 제가 말씀드릴건 3D Transform 사용하는 이유와 CSS로 Animation 최적화 방법을..

이 전 회고에도 한 번 적었던 게 있었는데 이번 회고는 네.. 피드백 받은걸로 해볼게여 제가 생각하기에 정말 빠르게 과제를 제출한 사람 중 한 명이라 생각이 듭니다. 그래서인지 분명 확인을 하고 보냈던 부분에서 조금씩 달랐어요.. 1. ID는 문서에 하나만 존재해야한다. 이건 정말 생각도 못했던 문제였어요.. 지금껏 교수님들 눈에 쉽게 찾을 수 있게 늘 해오던 버릇 같은 느낌이었는데 오류가 생겨 반성을 조금 했습니다. 너무 보여주기 식으로 만들어서 저런 문제가 생긴듯 합니다.. 2. float를 통해 구현해 보아라. 너무 대학생 과제를 생각하고 눈에 보이는 것만 해결하려 만들었나봐요.. flex나 float를 알고 있지만 또.. 쓸데없이 div 영역을 나누어 만들었습니다.. 분명 요기서 생기는 문제를 대..

오늘은 제목 그대로 어떤 방식으로 하는지 적어볼게요 우선 Preload가 뭔지부터 시작합니당 Preload 웹 페이지에서 리소스(폰트, 이미지, 스크립트 등)를 미리 로드하여 로딩 시간을 최적화하는 방법 이렇게 웹 페이지를 로드할 때 필요한 리소스를 미리 가져와 사용자 경험을 향상시킬 수 있음. 따라서, 폰트 preload의 경우, 폰트 파일을 미리 가져와 브라우저에 캐싱하여 로딩 시간을 단축시키는 거예요 이러면 렌더링 될 때 딜레이 없이 폰트가 즉시 사용될 수 있는 거죠 preload를 사용하기 위한 단계 1. HTML의 head 태그 내에 preload 태그를 추가 - href : 폰트 파일의 경로를 지정 - as : 리소스의 종류를 지정. ex) 폰트의 경우 "font"로 지정 - type : 폰트..

📆 제로베이스 시작하고 한 달.. 생각보다 빠르네요 뭘 했다고 말하기도 애매모호하고, 그렇다고 나 이제는 잘해요. 이것도 아닌 어중간하네요 한 달 동안은 어떤 식으로 공부했고 좋았는지, 아쉬웠는지 또 앞으로는 어떤 방식으로 보완해 나갈 것인지 적어볼게요 📍지난 한 달 동안 좋았던 점 우선적으로 전공으로 배웠다고 해서 자만하던 제 자신이 아직은 많이 부족하다는 점을 알게 되어 좋았어요 과제를 하며, 강의를 들으며 돌아보는 제가 이전과는 다르게 찾아보고 해결해보고 또 다른 방법은 없는지 찾아보는 습관이 생겨서 좋았던 것 같아요 늘 하다가 흐지부지하는 일이 대부분이었는데 그래도 TO-DO List를 따라가다 보니 꾸준히 계속할 수 있어서 좋았어요 📍지난 한 달 동안 아쉬웠던 점 아쉬운 점이라고 하면 초반 TO..

오늘은 짧게 개념이랑 이유만 적고 가볼게여 글이 길어지니까 지루하다는 의견이 있어 짧게 적어봅니다.. 시멘틱 태그란? html 문서의 구조와 의미를 구체적으로 설명하기 위해 새롭게 추가된 태그 기존 HTML4에서 레이아웃을 구성하던 , 을 넘어서 등의 태그가 도입되어 구조를 더욱 명확하게 표현할 수 있는 거예요. 시멘틱 태그를 사용했을 때 좋은 점이라고 하면, 1. 검색엔진 최적화(SEO)에 도움을 준다. 2. 웹 페이지가 의미 있는 구조를 가지게 되어 웹 접근성이 개선된다. 3. 코드의 가독성이 올라가 개발자가 코드를 쉽게 이해하고 유지 및 보수에 용이하다. 이렇게 3가지 정도가 있어요. (SEO에 대해서는 블로그를 한 번 적어볼게요) 웹 표준이란? 웹에서 사용되는 기술이나 규칙을 표준화한 것 즉, 월..