목록개발🌐/HTML, CSS, SCSS (7)
능히 해낼 수 있다

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 알아두면 나중에 쓸모가 있지 않을까 싶어 우연히 발견한 HTML태그 및 속성들을 기록하고자 한다. 1.Tooltip (툴팁): 툴팁은 요소 위에 마우스를 올렸을 때 추가 정보를 보여주는 기능으로 주로 'title' 속성을 사용하여 구현한다. 아래 코드처럼 타이틀 속성을 사용하면 아래 이미지 처럼 출력된다. 마우스를 올려보세요!! 2. Download (다운로드): 'download' 속성은 링크를 클릭했을 때 파일을 다운로드할 수 있도록 도와준다. /* 원하는 주소를 href에 넣고 download속성 넣기*/ PDF 다운로드 3. Content Editable (편집 가능한 내용): 'contentedi..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). CSS 전처리도구인 SCSS. 지난번 재활용편에 이어 두번째 SCSS관련 글을 기록하고자 한다. 230126 SCSS: @mixin, @include '재활용'편 ✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). css의 전처리 도구인 scss. sass라고도하고 scss 라고도 하지만 문법이 살짝 다르기 때문에 구 ronieo.com css 관련 기능에는 for문을 사용한다고 전혀 생각하지 못했다. for문은 화면을 꾸미는 것엔 사용하지 못한다고 생각했기 때문이다. 이것이... 지식의 범위와 시선이 좁으면 만나는 한계인듯 싶다. for문의 구성 방식은 f..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). css의 전처리 도구인 scss. sass라고도하고 scss 라고도 하지만 문법이 살짝 다르기 때문에 구분해서 이야기해주는게 좋다 오늘은 scss문법중에 하나인 @mixin, @include 사용법에 대해 기록해 놓으려 한다. 예시 1 왼쪽은 scss 오른쪽은 css 코드인데 같은 내용을 각 문법으로 작성한 것이다. css적인 요소들을 작성할 글이기 때문에 html관련 코드는 가져오지 않았다. 각 요소들에게 center처리를 해주려면, 오른쪽 css 같은 경우는 같은 내용을 반복해야하는 번거로움이 있는 반면, 왼쪽의 scss같은경우는 위쪽에 @mixin이라는 키워드를 사용 해 center 적용 속성들을 작..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 레이아웃클론코딩을 완성하였다. 사실 완성이라고 할 순 없고, 정적인 것들, 배치, 색 정도를 html/css를 통해 비슷하게 만들었다. JS를 활용해서 슬라이드 함수 만들어서 메인섹션 한 쪽에 무한으로 돌아가는 광고 슬라이드?도 만들고싶었는데 작업기간 2주,평일 10일의 반을 css관련 내용을 익히는데 써버려서, 지난 글을 적는 5일차 시점에서야 본격적으로 배치다운배치, 색, 이미지 등을 넣을 수 있게 되었다. (31일 즘엔가 무한 슬라이드도 추가해서 푸시했당) 1차 과제의 필수 조건들 중에 꼭 해내고 싶었던 것이 아래 3가지 인데, 시멘틱 태그를 최대한 활용 CSS Flex 혹은 Grid 등을 활용 부분..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). html/css수업을 들으면서 1차 과제를 진행하게 되었다 그것은 바로 레이아웃 클론코딩. 웹 랜딩페이지를 봤을 때 짜여져있는 구조를 그대로 따라해 보는 것인데, 강사님의 조언으론 화려한 기술구현이 돋보이는 웹사이트 보다는 정적이고 단순하면서도, 레이아웃이 여러개 나뉘어있는 사이트로 도전하는 것을 추천한다고 하셨다. 그 말씀의 이유는 프론트엔드 개발자로서 화려한 기술을 먼저 쫒기 보다는 기본에 충실하고 Sementic Tags를 잘 활용할 수 있어야 하기 때문인 것이라는 생각이 든다. 여기서 Sementic Tags란 html안에서 뜻이없는 div태그를 남발하지 않고도 정확히 어떤위치에서 무슨 역할을 하고..