# htmlcss

541개의 포스트
post-thumbnail

엘리스 SW 엔지니어 트랙 5주차

htmlcss개발자엘리스 SW 엔지니어 트랙자바스크립트프론트앤드

어제
·
0개의 댓글
·
post-thumbnail

<JS> JavaScript 시작!

📍 Javascript 기초 시작! 👩🏻‍💻 JavaScript 의 처음 목적은 웹브라우저 조작 하는 일에 그쳤지만, 현재는 JS 로 그 이상의 많은 개발을 할 수 있는 세상이 되었다. JS 만 잘 해도 개발의 대부분을 할 수 있게된 것이다!! 지금 시점

1일 전
·
0개의 댓글
·
post-thumbnail

<JS> 동적인 alert 박스를 만들자!

HTML/CSS 로 원하는 UI 모양을 일단 만든다. 만든 문서는 일단 숨겨둔다 (display: none; &lt;- css 로 숨긴다) 버튼을 하나 만들고 버튼을 클릭 했을때 숨겨둔 HTML/CSS UI 가 나오도록 만든다고 생각한다.태그 옆에 속성으로 onclic

1일 전
·
0개의 댓글
·
post-thumbnail

<HTML/CSS> background-image & margin collapse

📍배경 이미지를 넣을때는 CSS 'background-image' background-image : url (이미지 주소 또는 경로); 배경 이미지를 겹쳐보고 싶으면 위의 코드에 , url(이미지 주소 또는 경로); 사용 background-size : 이미지

2일 전
·
0개의 댓글
·
post-thumbnail

<HTML/CSS> position & 반응형 레이아웃

컨텐츠의 좌표 이동이 가능하게 함.내 기준점을 정해줌해당 컨텐츠를 공중에 띄워 보기에는 위에 있어 보이게함.positon 속성 지정 후 left, right, top, bottom 좌표 값 지정가능. (- 값도 가능) static (기본값) : 좌표이동 안함 relat

2일 전
·
0개의 댓글
·
post-thumbnail

<HTML/CSS> float 실습과 말줄임표

📒 간단히 구현된 화면에 나눈 구역과 중요하다고 생각되었던 스타일을 적어본다. white-space: 요소가 컨텐츠가 길어질때 공백과 줄바꿈을 어떻게 할지 정하는 속성normal : 정해진 가로폭 보다 컨텐츠 글이 길어지면 자동으로 줄바꿈함nowrap : 정해진 가

3일 전
·
0개의 댓글
·
post-thumbnail

<HTML/CSS> css 레이아웃 - flex

css 레이아웃을 위한 display 속성.아이템을 행 또는 열로 자유자재로 배치할 수 있음.중심축을 잘 생각해야함flex 에서는 우선 중심축과 반대축의 개념을 잡는게 중요!display: flex; 로 꼭 flex 임을 선언 후에 속성들 사용!flex-directio

3일 전
·
0개의 댓글
·
post-thumbnail

<HTML/CSS> 자리 배치 display 속성 & 레이아웃 - float

display: inline ; 한글에서 사용하는 '어울림' 과 유사함width, height 값의 적용이 되지 않는다.margin 적용 X, padding 적용 O대표 태그: span, a 등 display: block;한글에서 사용하는 '자리 차지' 와 유사함 옆

3일 전
·
0개의 댓글
·
post-thumbnail

<HTML/CSS> HTML/CSS 기본 내용 정리

📍 HTML 문서의 기본 구조 vscode 에디터에서 ! + tap키 로 자동완성 된다. 📍 CSS 파일은 따로 만들어 link tag 연결하자 너무 많은 내용을 html 문서에 다 적는다면 가독성이 떨어지고, 추후 코드 리팩토링이 어려워진다. html의

3일 전
·
0개의 댓글
·
post-thumbnail

Blur Hover Effect

javascript공부를 하면서 잊어가는 html/css감각을 되살리기 위해서 html/css 프로젝트도 연습해보았다. 코드연습을 손으로 하는게 습관이 돼서 블로그에 남기는게 어렵다.. 전부 종이에 작성한다.. 언제쯤 블로그나 기록을 남길 수 있는 곳에 작성하는 습관을

3일 전
·
0개의 댓글
·

엘리스 SW 엔지니어 트랙 4주차(3)

Promise를 대체할 수 있는 ES8 문법이 존재한다.async/await이라는 키워드인데 Promise와 then을 매우 쉽게 만들어준다.async 키워드 사용시 Promise 오브젝트가 생성된다.이렇게 함수 앞에 async 키워드만 하나 붙여줘도 Promise가

5일 전
·
0개의 댓글
·

엘리스 SW 엔지니어 트랙 4주차(2)

저번시간 콜백함수를 사용했을 때 나타날 수 있는 단점인 콜백지옥을 어떻게 해결할 것인지에 대해 알아보자.콜백함수를 연달아 사용하게 되면 가독성이 무척이나 떨어지게 된다.이를 해결하기 위해 나온게 Promise 디자인 패턴이다.프로미스 예시.new Promise()문법으

5일 전
·
0개의 댓글
·

엘리스 SW 엔지니어 트랙 4주차(1)

벌써 4주차의 절반이 지나갔다. 새로운 내용이 너무 많았기에 그걸 다 익히려고 하니 너무 정신이 없었던 것 같다. 그래도 나만 그런게 아니라 다른 레이서분들도 다 마찬가지라 하니 괜히 위안도 되고 한다. 초심만 잃지 말고 계속 열심히 달려보자 자바스크립트 함수 함수

5일 전
·
0개의 댓글
·

엘리스 SW 엔지니어 트랙 4주차

매일매일 정신없이 지나가는 하루가 반복된다. 새로이 배우는 내용이 쏟아지니 정말 어질어질하다. import / export

5일 전
·
0개의 댓글
·

HTML5 시멘틱 태그와 웹 표준을 지키는 이유

시멘틱 태그(Semantic Tag)를 사용하는 이유 📌시맨틱 태그(Semantic Tag)란? Semantic의 사전적 의미는 "의미의, 의미적인"이다. 즉, 시멘틱 태그는 "의미있는 태그"로 해석할 수 있으며, 태그에 의미를 부여한다는 뜻이다. 📌시멘틱 태그의

7일 전
·
0개의 댓글
·
post-thumbnail

제로베이스 2주차 학습요약

웹 접근성을 위해 태그에 의미 정보를 전달하고 element의 확 장 개념으로 좀 더 명확한 구조와 의미를 부여하는 역할을 하는 속성이다.태그가 가지는 이름표 같은 역할을 한다.role이랑 다르게 정해져 있는 의미가 아닌 개발자가 사용자한테 전달하는 내용이나 상황을 직

2023년 3월 18일
·
0개의 댓글
·
post-thumbnail

미션1중 막혔던 사항들과 해결 방안

나는 비록 1년 6개월 전이지만 6개월정도 html/css/js등을 익힌적이 있어서 솔직히 쉽게 할 수 있을줄 알았고 내가 다 기억하고 있다 자신하였다... 하지만 이번 미션을 해보면서 이곳저곳에 막히고 조건을 제대로 확인하지 않아 5시간 정도 사용했다..가장 처름으로

2023년 3월 17일
·
0개의 댓글
·
post-thumbnail

html css

test1

2023년 3월 17일
·
0개의 댓글
·