0-0eong_dev_log

0-0eong

기록하는 것을 좋아하는
FE개발자 정준영입니다
🌊🏄🏻‍♂️💙

[CSSS] noopener, noreferrer, nofollow가 뭐야??

..들어가며 Html로 하이퍼링크를 작성할 때 noopener, noreferrer, nofollow 라는 속성을 넣어줄 수 있다고 한다. 위에 속성들은 무엇이고, 언제 사용해야 하는지 알아보자. noopener 웹사이트를 만들 때 a 태그에 target=blank 속성을 자주 넣게 되는데 이는 자칫 사이트의 성능과 보안을 취약하게 만들 수 있다고 한다. 이유는 바로 탭 내빙(Tab nabing) 이라는 피싱 공격 때문인데 JS만 있다면 *window.opener를 이용해 새롭게 연 페이지에서 기존에 원본 페이지에 직접 접근할 수 있게 된다. noopener 속성값은 이를 방지하기 위한 녀석이다. noopener를 사용하면 원본 페이지에 대한 *컨텍스트 액세스를 허용하지 않고 새 탭에서 *최상위 브라우징..

HTML&CSS

[CSS] Grid vs Flexbox

... 들어가며 Html의 레이아웃을 정의하는 속성에는Float Grid Flexbox 3가지가 있습니다. 그렇다면 우리는 언제 어떤 레이아웃을 쓰는 것이 가장 이상적이고 현명한 마크업이라고 할 수 있을까?? 답을 먼저 말하자면 아직 이 질문에 대한 정답을 정확하게 내릴 수는 없다는 것이 학계의 점심이다. 하지만 그럼에도 불구하고 FlexBox와 Grid의 차이점에 대해서 끈임없는 물음표를 던지면서 어떻게 해야 각 목적에 맞게 레이아웃을 구성할 수 있는지 탐구하는 자세는 분명 필요하다. 🤔 각각의 레이아웃의 특징을 알아보자. FlexBox 1차원 레이아웃 시스템이다. 박스의 방향지정이 가능하기에 매우 Flexible하다고 볼 수 있다. FlexBox 내에서 Flex-item들을 "정렬"하는데 특화되어 있..

HTML&CSS

[CSS] 3d animation 최적화 기법

✍️ 3D transform을 사용하는 이유 기본 transform을 사용하지 않고 3d transform을 사용하는 이유는 간단하게 2d 이상의 다이나믹한 animation을 기대하기 때문도 있고 후반에 이야기할 animation을 사용할 때 발생하는 문제점을 보완하기 위해서도 있다. 우선 3d transform에 대해서 알아보자. MDN 문서에서 이야기하기를 우리가 기존에 2d로 보였던 요소들이 3d요소로 보일 수 있는 원인은 모두 perspective(원금감) 속성 덕분이라고 한다. 원리는 간단했다. 부모요소에는 perspective 속성을 부여하고(관측자로부터 멀어지게 하거나 가깝게 하고) 자식요소 에게는 기존에 2d transform 속성을 부여해줌으로써 자식요소가 마치 공중에 떠있다거나 움직이..

HTML&CSS

[HTML5] 시멘틱 태그를 사용하는 이유와 웹 표준을 지켜야 하는 이유

시멘틱 태그가 뭔데? Symantic이란 "의미의" 라는 뜻의 단어이다. 즉 시멘틱 태그란 **의미가 있는 태그**를 뜻한다. 이러한 HTML5 시멘틱 태그는 웹 페이지의 구조와 내용을 명확하게 정의하는 데 도움을 주며, 검색 엔진 최적화(SEO)와 웹 접근성에도 중요한 역할을 한다.또한 웹 표준을 준수하여 크로스 브라우징이나 호환성 문제를 최소화할 수 있다. 또한 웹 표준을 지키는 것은 모든 브라우저에서 웹 페이지가 일관된 방식으로 동작하도록 보장하며, 크로스 브라우징이나 호환성 문제를 최소화할 수 있다. 웹 표준을 준수하면 코드의 가독성이 높아지고, 코드 유지 보수성도 높아지기 때문에 개발자가 코드를 더 쉽게 유지 보수하고, 새로운 기능을 추가하기도 더 쉬워집니다. 또한 보안에 대한 이슈를 사전에 예..

HTML&CSS

HTML+CSS pading border margin

padding, border, margin 속성 padding : 본문 내용과 테두리(border) 사이의 영역 border : 본문을 감싸는 테두리 (굵기, 모양, 색깔, 투명도 설정가능) margin : border와 바깥과의 "여백" = 박스와 전체공간과의 여백 display 속성 ( inline , block, inline-block) 요소는 대게 inline 요소와 block 요소로 나뉜다. inline : 줄 속에 넣는 요소라고 하여 주로 텍스트를 넣는 태그에 사용. 와 같은 것들이 inline 속성을 기본으로 갖고 있으며. 줄 바꿈이 되지 않는 것이 특징이다. block : 덩어리라는 뜻으로 행의 영역을 전부 차지하게 되는 특성을 갖고 있어( 말 그대로 덩어리) 자동으로 줄바꿈이 되는 것이 ..

HTML&CSS

우리가 자주 쓰는 표는 어떻게 만들어질까? 위와 같은 페이지를 만들어오는 것이 숙제였는데 가능하기 위해서는 표를 만들 수 있어야 한다. HTML에서 표는 어떻게 만들 수 있을까?? Table 레이아웃 내용 내용 기본적인 구성은 위와 같다. 표를 만들기 위해서는 첫째로 `table` 태그로 감싸주어야 하고 table태그 내에 tr은 row 즉 행, td는 columns 즉 열을 의미한다. 또한 표에도 제목과 내용부분이 나뉘어있듯이 가장 첫줄에 보통 들어가는 주제 부분은 `thead`로 그 밑 부분 부터는 `tbody`로 감싸준다는 것을 기억하자!😁 테이블 안에서의 상하정렬 vertical-align td, th { vertical-align : middle; }요위에 코드는 "모든 td, th 태그에 상하..

HTML&CSS

HTML+CSS form input

숙제 숙제는 위와 같은 레이아웃을 만들어오는 것이었다. 강의는 20분도 되지 않는데 위에 숙제를 완료하기까지는 장정 3시간이나 걸렸던 것 같다. 역시 찐 개발실력이 늘기 위해서는 공부도 공부지만 코딩하는 시간을 물리적으로 많이 갖는 것이 맞는 것 같다. 그러면 다시 공부했었던 것들을 정리해보자. form input 태그 옵션1 사용자의 정보를 기입하는 칸인 `` 태그를 사용하기 위해서는 먼저 `` 태그로 감싸주어야 한다. `input`에는 타입이 많지만 위에 것들이 가장 많이 사용되는 것이라고 한다. 잘 알아두자!! 특정 타입에만 스타일을 주고 싶을 때 input[type=email] { color : grey } 위와 같은 코드를 작성하면 input의 type속성이 email인 요소만 찾아서 스타일을 ..

HTML&CSS

HTML+CSS div 주의사항

박스를 만들 때 주의사항이 있다. div에 width 속성은 border이나 padding을 고려하지 않은 크기이다. 즉 위 그림에 padding 안쪽 파란색 칸 까지만이 width인 것이다. 때문에 200px의 박스를 만들어도, padding을 많이 주게 되면 실제 보여지는 박스의 폭이 padding 만큼 늘어날 수 있다고 한다. 박스의 폭을 border까지 설정해주고 싶을 때 쓰는 속성 .box { box-sizing : border-box; /박스의 폭은 border까지 포함입니다/ box-sizing : content-box; /박스의 폭은 padding 안쪽입니다/ } box-sizing이라는 속성을 주게되면 border까지를 실제 박스의 폭으로 설정해준다. CSS 파일 작성시 기본으로 쓰면 좋..

HTML&CSS

HTML+CSS position

위와 같은 레이아웃을 만들어본다고 해보자. 보이는 박스(div)가 몇개인가? 내 눈에 보이는 박스는 5개이다. 제일 아래 박스가 겹쳐지게끔 위로 이동시켜주는 것이 포인트인데 어떻게 div를 내 마음대로 움직이게 할 수 있을까? CSS에는 좌표속성이 있다. .box { top : 20px; left : 30%; } HTML 에서는 위와같이 `top` `left` `right` `bottom`라는 속성을 사용해주면 언제든지 좌표이동을 할 수 있다. 하지만 내 위치가 어디인줄 알고 어떻게 이동하는가? 이동하기 전에는 항상 기준점이 필요하다. .box { position : static; /* 기준이 엄서요 (좌표적용 불가) */ position : relative; /* 기준이 내 원래 위치요 */ posit..

HTML&CSS

Prev 1 2 3 Next

티스토리툴바