인라인 요소 인라인 요소는 본인의 컨텐츠 크기만큼 영역을 차지하는 요소를 말한다. 기본적으로 width , height 를 가지지 않는다. 아니 못한다...😕 대표적인 인라인 요소 span , strong 등이 있다. 더 자세히 알아보고 싶다면 ⬇️ Inline element 시멘틱 태그 Text-level semantics inline element , 줄 바꿈을 위한 태그 을 사용하면 바로 줄 바꿈이 일어난다 은 텍스트 박스에서 한 줄로 모두 표시가 안될 때에만 줄 바꿈이 일어나게 하는 것 html의 핵심적인 요 yeeed.tistory.com 블록 요소 블록 요소는 하나의 독립된 덩어리로 화면의 가로 폭 전체를 영역으로 가진다. 일반적으로 블록 요소를 사용하면 줄 바꿈이 일어난다. 대표적인 블록 요..
HTML 태그들 중 가장 난이도 높았던 게 있다면...? 바로 태그다. (개인적인 이해도입니다 🥲) 그래서 엑셀도 안좋아한다ㅋ.ㅋ 그도 그럴 것이 행열로 가득 찬 모니터 화면을 보고 있자면 현기증이 난다...; 그것과 비슷한, 아니 거의 똑같은 모습을 구현할 수 있는 태그가 바로 ! 이젠 싫다고 피할 수 없게 됐으므로... 하나하나 차근차근 이해해보기로 했다. 개인적으로 공부한 내용을 정리한 게시물입니다. 부정확한 정보가 있을 수 있습니다. 오류 발견 시 피드백 부탁드려요 ! 어디에 사용되는가? 태그는 말 그대로 테이블을 만들 때 사용된다. 표의 형태를 갖추고 있으며 그 안에는 제목(caption) 과 행(tr), 열(col), 셀(td), 셀의 제목(th) 을 자식 요소로 가지고 있다. 태그의 종류들 ..
Text-level semantics inline element , 줄 바꿈을 위한 태그 을 사용하면 바로 줄 바꿈이 일어난다 은 텍스트 박스에서 한 줄로 모두 표시가 안될 때에만 줄 바꿈이 일어나게 하는 것 html의 핵심적인 요소이며 링크를 만들 때 사용한다. href를 사용하여 경로를 지정해준다 자바스크립트로도 할 수 있지만 이는 웹 접근성에 위배된다. 태그안에 또 다른 , 같은 인터렉션이 가능한 요소를 자식으로 두지 않는다. 해쉬 링크 : 페이지의 안에서 이동할 때 사용한다. 아이디로 연결해 놓으면 click1 링크를 클릭 시 해당 부분으로 이동한다. click1 다운로드 : 해당하는 링크를 다운할수 있게 해 준다. (인터넷 익스플로러는 지원 불가 ㅋ) click 파일 이름 지정 hwp downl..
1. 시멘틱 태그 코드의 외형보다는 코드가 존재하는 의미와 목적에 중점을 둔다. 대부분의 태그 요소에는 고유한 의미가 존재한다. 검색엔진은 시멘틱 태그를 사용했을 때 더 많은 정보를 얻을 수 있다. SEO, 접근성에 도움을 준다. 스크린 리더 등 여러 가지 사용자 입장에서 문서 구조를 파악하기 쉽다. 코드를 들여다보는 다른 사람도 코드의 구조와 의미를 파악하기 쉽다. h1 태그로 감싼 제목을 span 태그로도 외형적으로 똑같이 보이도록 할 수 있지만 제목의 의미를 가진 h1 태그의 장점은 이용할 수 없다. 2. 태그의 종류 각각의 의미가 있는 태그를 사용해야 웹 표준성에 어긋나지 않으므로 지키는 것을 권장한다. 2.1 metadata 문서의 최상위 요소 lang 속성을 통해 문서의 주 언어가 무엇인지 설..
들어가기전에... HTML5 랑 HTML Living Standard?😵💫 웹표준통합에 대하여 웹표준은 WHATWG와 W3C가 발표하는 HTML의 최신버전을 말했다. 2019년 까지는 각자 표준을 발표했었는데 결국 두 단체중에 WHATWG사가 경쟁에서 이기게 되면서 양해각서를 체결했다. 현재 w3c에서 개발하던 HTML5.3은 개발이 중단됐고, WHATWG의 Living Standard가 표준이 되었다. w3c의 마지막 표준은 2017년에 발표한 html5.2버전이다. 이에따라 2021년 WHATWG에서 발표하는 Living Standard가 웹표준이되었다. 1. 선언문 HTML 문법을 사용할 때는 반드시 아래와 같은 선언문을 최상단에 선언해야한다. DTD(Document type Definition)..
깃허브에 익숙하지 않은 나... 레파지토리를 만들 때 제대로 확인하지 않고 만들어서 비공개를 공개로, 공개를 비공개로 하고 싶을 때! 이 글을 보시면 됩니다 😏 🔔 변경하는 방법 1. 상태를 변경하고 싶은 Repositoty에 들어가서 Settings 를 누른다. 2. 하단으로 내려오면 Danger Zone에서 Change visibility 버튼을 눌러준다. 3. public으로 변경하고 싶다면 Make pubilc을 누르고, private로 변경하고 싶다면 Make private를 누르면 된다. 밑에 입력창에 굵은 글씨로 써진 본인의 github repository 주소를 그대로 따라 넣어주고 엔터 누르면 끝 ! 놀랍게도 너무 쉽죠..? 하지만 아무것도 모르는 깃린이들은 설정 찾기도 어렵다고...!😭
Git과 Git-Hub의 차이점에 대해서 알아보자 이름이 비슷하여 서로 같다고 오해하는 경우가 있는데 이 둘은 완전히 다른 시스템이다. 참고로 저는 맥을 사용하고 있어서 맥기준으로 작성하였습니다.😊 Git(깃) 이란 무엇인가? ✔️ Git 이란? 로컬에서 관리되는 분산 버전 관리 시스템(VCS : Version Control System) 컴퓨터 파일의 변경사항을 추적하고 다수의 사용자들과 해당 파일들의 작업을 조율하기 위한 시스템 소프트웨어 개발에서 소스 코드 관리에 주로 사용되지만 다양한 파일의 변경사항을 지속적으로 추적하기 위해 사용 가능하다. GitHub, Bitbucket, Gitlab 등 다양한 Git 기반 버전 관리 호스팅 서비스들이 존재한다 💡 버전 관리가 필요한 이유 여러 사람과 협업하며..
무슨 일이 있었나? 벌써 일주일이 지나고 2주차가 되었다. 영웅님이 추천해주신 '함께 자라기' 책을 읽고 있는 중인데 초반부임에도 불구하고 하이라이팅을 많이 해뒀다.😊 이번주에는 HTML을 다 나가고 CSS수업을 많이 했는데 HTML은 기본기가 중요하다면 CSS는 센스가 더 중요해 보인다.(물론 이것도 기본기는 중요하겠지만.. 요지는 그게 아님) 너도 나도 다 알고 있는 기법인데 이걸 여기다 적용한다고? 하는 순간들이 많았다. 모두가 같은 과제를 하더라도 다 다른 결과물이 나오는 게 신기하고 여러 사람들의 코드를 보면서 '아 이 사람은 여기를 이렇게 짰구나' 하고 끄덕이고 갈 때도 많다. 아직 최적화도 잘 모르기에 뭐가 더 좋은 코드인지 알지 못하고 구현하는 데에만 집중하게 돼서 '이게 맞나?' 싶긴 하..
첫 스프린트 회고 날 우아한형제들 메이커준님이 직접 특강을 담당해주셨다. 현재 우아한 테크 코스 프론트엔드 교육과정을 담당하고 계시는 분이라고..! 메이커준님은 밝음이 장점이라고 하셨다. MBTI테스트에서 E가 거의 100퍼센트로 나오셨다는데 비대면 강의로도 그 밝음이 모니터 너머로까지 전해지는ㅋㅋㅋ 회고의 과정 중 많은 인사이트를 얻은 것 같아서 정리를 해보려 한다. 스트레스? 스트레스를 받으면 내 몸이 어떻게 반응하는지 아는 게 중요하다. 식은땀이 나고 몸이 경직되고. 이럴 때 스트레스를 이겨내야지 하면 오히려 스트레스가 누적된다. 스트레스는 조금 쌓였을 때 작은 에너지로 풀어줘야 몸에, 마음에 부담감이 덜해진다. 잠시 산책을 한다거나 따뜻한 차를 마신다거나. 영웅님 : 번 아웃은 피할 수 없는 것 ..
무슨 일이 있었나? 멋쟁이사자처럼 프론트엔드 스쿨에 입교(?) 하고 나서 맞이하는 첫 주말! 지난 1기와 비교하여 교육과정이 약 4주가량 늘었고 그때는 백엔드까지 다뤘으나 이번 기수에서는 프론트엔드 기술교육에 중점을 둔다고 했다. 아직 진도가 빠른 편은 아니어서 다행히도 따라갈만했다. 다들 벨로그 정리와 과제 구현 등 샥샥샥 완성하는 것을 보며 자극도 많이 됐다. 제주코딩베이스에서 강사님들이 강의를 해주시는데 호준님, 재현님 이렇게 두 분이서 html과 css 강의를 진행하고 계신다. 주마다 특강 강사님들을 모셔 라이브 코딩 수업이 진행 되는 것 같다. 아직은 1주차라 특별히 진행된 프로젝트는 없지만 앞으로의 커리큘럼들을 보면 바쁜 나날들이 예상된다...! 무슨 느낌이 들었나? 사실 국비지원 교육이라고 ..