# htmlcss
<JS> JavaScript 시작!
📍 Javascript 기초 시작! 👩🏻💻 JavaScript 의 처음 목적은 웹브라우저 조작 하는 일에 그쳤지만, 현재는 JS 로 그 이상의 많은 개발을 할 수 있는 세상이 되었다. JS 만 잘 해도 개발의 대부분을 할 수 있게된 것이다!! 지금 시점
<JS> 동적인 alert 박스를 만들자!
HTML/CSS 로 원하는 UI 모양을 일단 만든다. 만든 문서는 일단 숨겨둔다 (display: none; <- css 로 숨긴다) 버튼을 하나 만들고 버튼을 클릭 했을때 숨겨둔 HTML/CSS UI 가 나오도록 만든다고 생각한다.태그 옆에 속성으로 onclic
<HTML/CSS> background-image & margin collapse
📍배경 이미지를 넣을때는 CSS 'background-image' background-image : url (이미지 주소 또는 경로); 배경 이미지를 겹쳐보고 싶으면 위의 코드에 , url(이미지 주소 또는 경로); 사용 background-size : 이미지
<HTML/CSS> position & 반응형 레이아웃
컨텐츠의 좌표 이동이 가능하게 함.내 기준점을 정해줌해당 컨텐츠를 공중에 띄워 보기에는 위에 있어 보이게함.positon 속성 지정 후 left, right, top, bottom 좌표 값 지정가능. (- 값도 가능) static (기본값) : 좌표이동 안함 relat
<HTML/CSS> float 실습과 말줄임표
📒 간단히 구현된 화면에 나눈 구역과 중요하다고 생각되었던 스타일을 적어본다. white-space: 요소가 컨텐츠가 길어질때 공백과 줄바꿈을 어떻게 할지 정하는 속성normal : 정해진 가로폭 보다 컨텐츠 글이 길어지면 자동으로 줄바꿈함nowrap : 정해진 가
<HTML/CSS> css 레이아웃 - flex
css 레이아웃을 위한 display 속성.아이템을 행 또는 열로 자유자재로 배치할 수 있음.중심축을 잘 생각해야함flex 에서는 우선 중심축과 반대축의 개념을 잡는게 중요!display: flex; 로 꼭 flex 임을 선언 후에 속성들 사용!flex-directio
<HTML/CSS> 자리 배치 display 속성 & 레이아웃 - float
display: inline ; 한글에서 사용하는 '어울림' 과 유사함width, height 값의 적용이 되지 않는다.margin 적용 X, padding 적용 O대표 태그: span, a 등 display: block;한글에서 사용하는 '자리 차지' 와 유사함 옆
<HTML/CSS> HTML/CSS 기본 내용 정리
📍 HTML 문서의 기본 구조 vscode 에디터에서 ! + tap키 로 자동완성 된다. 📍 CSS 파일은 따로 만들어 link tag 연결하자 너무 많은 내용을 html 문서에 다 적는다면 가독성이 떨어지고, 추후 코드 리팩토링이 어려워진다. html의
Blur Hover Effect
javascript공부를 하면서 잊어가는 html/css감각을 되살리기 위해서 html/css 프로젝트도 연습해보았다. 코드연습을 손으로 하는게 습관이 돼서 블로그에 남기는게 어렵다.. 전부 종이에 작성한다.. 언제쯤 블로그나 기록을 남길 수 있는 곳에 작성하는 습관을
엘리스 SW 엔지니어 트랙 4주차(3)
Promise를 대체할 수 있는 ES8 문법이 존재한다.async/await이라는 키워드인데 Promise와 then을 매우 쉽게 만들어준다.async 키워드 사용시 Promise 오브젝트가 생성된다.이렇게 함수 앞에 async 키워드만 하나 붙여줘도 Promise가
엘리스 SW 엔지니어 트랙 4주차(2)
저번시간 콜백함수를 사용했을 때 나타날 수 있는 단점인 콜백지옥을 어떻게 해결할 것인지에 대해 알아보자.콜백함수를 연달아 사용하게 되면 가독성이 무척이나 떨어지게 된다.이를 해결하기 위해 나온게 Promise 디자인 패턴이다.프로미스 예시.new Promise()문법으
엘리스 SW 엔지니어 트랙 4주차(1)
벌써 4주차의 절반이 지나갔다. 새로운 내용이 너무 많았기에 그걸 다 익히려고 하니 너무 정신이 없었던 것 같다. 그래도 나만 그런게 아니라 다른 레이서분들도 다 마찬가지라 하니 괜히 위안도 되고 한다. 초심만 잃지 말고 계속 열심히 달려보자 자바스크립트 함수 함수
엘리스 SW 엔지니어 트랙 4주차
매일매일 정신없이 지나가는 하루가 반복된다. 새로이 배우는 내용이 쏟아지니 정말 어질어질하다. import / export
HTML5 시멘틱 태그와 웹 표준을 지키는 이유
시멘틱 태그(Semantic Tag)를 사용하는 이유 📌시맨틱 태그(Semantic Tag)란? Semantic의 사전적 의미는 "의미의, 의미적인"이다. 즉, 시멘틱 태그는 "의미있는 태그"로 해석할 수 있으며, 태그에 의미를 부여한다는 뜻이다. 📌시멘틱 태그의
제로베이스 2주차 학습요약
웹 접근성을 위해 태그에 의미 정보를 전달하고 element의 확 장 개념으로 좀 더 명확한 구조와 의미를 부여하는 역할을 하는 속성이다.태그가 가지는 이름표 같은 역할을 한다.role이랑 다르게 정해져 있는 의미가 아닌 개발자가 사용자한테 전달하는 내용이나 상황을 직
미션1중 막혔던 사항들과 해결 방안
나는 비록 1년 6개월 전이지만 6개월정도 html/css/js등을 익힌적이 있어서 솔직히 쉽게 할 수 있을줄 알았고 내가 다 기억하고 있다 자신하였다... 하지만 이번 미션을 해보면서 이곳저곳에 막히고 조건을 제대로 확인하지 않아 5시간 정도 사용했다..가장 처름으로
