개발/html css
시맨틱 태그(semantic tag)의 중요성..
html5 이전과 다르게 html5에서는 시맨틱 태그를 사용해서 코드의 가독성을 높여 좀 더 읽기 쉽게 해준다. css코드가 길어지다보니, class 명을 붙이더라도 수많은 div 속에서 html 전체구조가 들어오지 않았다. E-Commerce UNIF Design & Development 2015 -> Present div div div div div... 나중엔 큰 섹션을 위한 div인지 섹션 속 div인지도 헷갈리기 쉬웠다. 니꼬쌤의 코드를 비교해보니 Event 잠비나이 Music Band 2015 → Present 🌸 Art News Someone launched a very interested product section, footer, aside 등 시맨틱 태그를 이용하고있다. div 연발이 ..
노마드코더 코코아톡 클론 챌린지/코스 완료~!
슬랙을 써보는 경험부터 유쾌했던 노마드코더 강좌와 챌린지. 재미있으면서도 하나하나 해결하는게 뿌듯했던 과정이었다. 결과물은 여기 https://yongwoo-jeong.github.io/kakao-clone-2021/ 아래는 노마드코더 커뮤니티에 올린 후기 https://nomadcoders.co/community/thread/739 #739 – 노마드 코더 Nomad Coders 개발자 99% 커뮤니티에서 수다 떨어요! nomadcoders.co 노마드코더는 구글링을 통해 알게되었고 클론코딩이라는 컨텐츠에 끌려 거의 가입과 동시에 수강을 시작했던 기억이 납니다. . 사실 초심자가 따라하기 좋은 클론코딩 + 재치있는 니꼬쌤 조합이라 강좌 자체도 참 많은 도움이 되었지만!! 챌린지🔥를 통해 성장하는걸 많이..
[CSS] 노마드코더 카카오톡 클론 코딩 챌린지 순항중
열번째 과제 제출 완료! 매순간순간 구현되지 않는 부분, 마음대로 조정되지 않는 위치 등으로 애먹고 있지만 그래도 잘 해내고 있다. 처음 계획대로 파이썬 챌린지도 병행하지 못한게 못내 아쉽지만, 지금 챌린지도 하루종일 붙잡고 있을때가 있는걸 보면, 내 능력밖의 일이었던것 같긴하다. 그래도 카카오톡 클론코딩 챌린지라도 열심히 따라가고 있음에 감사! 클론코딩이라는게 처음엔 참 막막했는데, 내 손으로 하나하나 갖춰지는 코드들을 보고있으면 뿌듯한 마음에 더 열정적으로 궁금한걸 찾게되고 시험삼아 구현해보는 등 재미가 붙는다. 좋은 컨텐츠를 만들어준 니꼬쌤에게 감사!
[html] form의 중요한 2가지 attribute: action, method
*id와 class중 편한것은 어떤것일지 생각해보자. 주로 classa를 많이 쓰긴한다! id를 사용할 경우 상대적으로 더 많은 인자를 써야하는듯? - CSS 파일에서 주석처리는 /* */로 감싸주면 된다. - styles.css 파일에는 font-family, background-color와 같이 모든 스크린에 적용될 수 있는 스타일을 써놓는다. 이는 하나의 방식이고, 자신만의 편한 방식을 택하면 된다. - form은 중요한 2가지 속성(attribute)을 가지고 있다. 하나는 action이고, 다른 하나는 method이다. - action은 어떤 페이지로 data를 보낼건지 지정할 수 있다. - action에 적어 놓은 URL에 해당하는 파일이 반드시 존재해야한다. - method는 2가지 방식 중..
[CSS] status-bar를 중앙 정렬해 위치시키는 hack! // 드디어 시작된 클론코딩!
css hack (justify-content: space-between 를 대신해 사용가능!) - 레시피 같이 어디든 쓸 수 있다. 이상하지만 작동한다. - 1 상위 박스 : justify-content: center; -중앙으로 몰림 -> 가운데 시계가 한쪽으로 쏠리는 문제가 발생!! - 2 내부 박스 범위 : width: 33%; -왼쪽으로 몰려서 범위 벌어짐, 왼쪽 위치할 박스는 왼쪽에 붙어서 정렬됨 - 3 중앙에 위치할 박스 : display: flex; justify-content: center; -중앙에 위치할 박스만 중앙에 위치함 - 4 오른쪽에 정렬할 박스 : *display*: flex; *justify-content*: flex-end; *align-items*: center; -오른..
[CSS] Flexbox, Media Queries recap
display에서 inline-blcck의 활용상 문제로 Flexbox를 고안했다. 자유롭게 box를 둘 수 있다. flexbox는 이름자체가 flexibe이다 2차원 레이아웃에서 잘 작동한다. 1) 부모 엘리먼트에만 명시해야한다. 나중에 이해하게 될것 부모 엘리먼트에만 말을 한다 3개의 dvi를 가리키는 자식을 움직이고 싶으면 flex를 할 필요없다 div의 부모에게 말하면된다 즉 body! body가 의 부모다 부모에게만 명시하면된다 부모 엘리먼트를 flex container로 만들어야한다 즉 body의 display가 flex를 주면된다 이제 body가 children을 제어할 수 있다 ※ Rule no1. flex는 부모의 display 속성에 해야한다 절대 자식에하는것이 아니다! display ..
[CSS] combinator, selector
Remember that you dont have to memorize all these things right now. You will learn by repetition in practicing. Combinator 1) div span : div 속 span을 의미. span이 div의 direct children이 아니어도 작동 2) div > span : span이 div의 direct children임을 의미. 이땐 direct children이 아니면 작동하지 않습니다. 3) div + span : div와 동등한 위치에 있는 span을 의미. div ~ span과는 달리 바로 옆에 위치해야함. 4) div ~ span : div라는 부모를 공유하는 모든 span 선택 Selector Att..