프로그래밍⚡️/htmlcss 8

이벤트 버블링, 막을 수 있다는데? 근데 막는게 꼭 좋은걸까?

이벤트 버블링, 리액트를 사용하다보면 클릭이 여러번 되는 경우가 있다. 이럴 때 이벤트 버블링 현상을 의심해볼 수 있는데, 이 개념을 모르면 에러를 해결하기 어렵다. 이벤트 버블링 버블링 현상을 간단하게 표현하면, 특정 태그나 요소에 이벤트가 발생하면 상위 요소인 부모 태그에 이벤트가 전달되는 것을 말한다. 이벤트 버블링 현상 예시 아래 코드를 보면 Box라는 div 아래 span, 그 아래로 button이 있는 계층 구조다. 여기서 button을 누르면 +1이 될 것이라는 예상과 다르게 321의 결과가 나온다. button을 누르는 순간 이벤트 버블링 현상으로 부모 요소인 span과 div의 onClick 이벤트가 모두 작동하기 때문이다. 이 버블링 현상은 자식에서 부모로만 전파되며 그 반대 현상인 상..

css transition과 animation

웹사이트 레퍼런스를 찾다보면 화려한 애니메이션이 난무하는 사이트를 볼 수 있다. 항상 저런 액티브한 사이트를 만들고 싶다는 생각을 했는데 이번에 배운 css 애니메이션 기능으로 어느 정도 구현 해볼 수 있을 것 같다. 근데 막상 많은 애니메이션을 구현하다보니 css파일이 엄청 길어진다 ㅠ css에서 애니메이션을 주는 방법은 2가지가 있다. 하나는 transition, 또 하나는 animation을 사용하는 방법이다. transition transition 단축 속성 트렌지션 사용방법은 간단하다. 아래는 트렌지션 단축 속성으로 순서대로 해당하는 속성을 입력하면 된다. /* transition: property duration timing-function delay */ .info { transition: ..

[css] background와 object

css에서 background는 배경을 설정하는 기능이다. 배경 컬러 지정, 그라데이션, 이미지 삽입 등 다양한 기능을 가지고 있다. backgorund css 설정 1. background-color 기본적으로 컬러를 설정할 수 있다. 웹브라우저 기본 216컬러 외에도 HEX코드, RGB로도 설정할 수 있다. background-color: #000000; background-color: rgb(255,255,255,0); background-color: green; 2. background-image 요소의 배경 이미지를 한개, 혹은 여러개로 지정한다. 여러개로 지정할 경우 가장 위에 선언한 이미지 레이어가 가장 위로 올라온다. 아래 예제와 같은 경우 이미지 파일이 가장 위로 표시된다. 이미지 외에 ..

css 캐스케이딩 - 스타일 적용 우선 순위

CSS는 Cascading Style Sheet의 약자라는 것을 처음 알았다. 여기서 Cascading이란 '폭포' '위에서 아래로 흐르는' 등의 뜻이 있다. 이것이 무엇을 의미하냐면 수많은 css 선택자들 중 어떤 것이 가장 우선 선택자인지를 구분하는 기능을 의미한다. 예를 들면 동일한 태그 내의 class 선택자에 red color를 적용하고, id 선택자에는 blue color를 적용했을 때 id 선택자가 우선순위가 높기 때문에 blue 컬러가 적용된다. 캐스케이딩 우선순위 캐스케이딩 우선순위는 3가지에 의해 결정된다 1. 중요도 2. 구체성(명시도) 3. 선언 순서 그럼 각 개념별로 자세하게 알아보자. 중요도 중요도를 결정하는 요소 및 순서는 아래와 같다. 1. 인라인 스타일 css - 태그 내에..

CSS - 선택자

부트캠프 2주차! 커리큘럼을 보니 지난주 프리캠프는 css, html, javascript의 기본을 고루고루 배웠다면 이번주는 CSS를 더 깊게 파고드는 한주가 될 것 같다. 이번 강의에서는 생산성을 높여주는 기능을 먼저 소개했다. 1. emmet(태그와 클래스명을 한번에 입력하는 기능) : 아래와 같이 입력하면 div태그 생성과 함께 클래스도 함께 생성된다. // div.wrapper__header 입력 시 2. 태그 한번에 생성하기 : 태그 뒤에 *n 숫자를 입력하면 원하는 숫자만큼 태그가 생성된다. //div*3 입력 시 총 3개의 div가 한번에 생성된다. 꿀팁 css 선택자 이번 강의에서는 선택자에 대해 배웠다. HTML 태그를 CSS파일로 가져와서 사용할 때 다양한 선택자를 활용할 수 있다. ..

부트캠프 5일차! 회원가입 인증창 만들기

이제 부트캠프를 시작한지 일주일이 다 지나간다. 5일 마지막 과제는 극악의 난이도를 자랑한다... 회원가입 인증창 만들기 1주차 파이널 과제, UI만 봤을 때 금방 끝날 줄 알았다. 실제로 HTML CSS로 UI 작업은 1시간 내로 끝났기에 더 자신감이 있었다. 하지만 문제는 기능 구현 ..! 구현해야할 기능 1. 지역선택하기는 서울, 인천, 경기 가능하도록 구현 2. '지역을 선택하세요'는 선택 불가능하도록 비활성화 3. 남성, 여성 성별 선택은 둘 중에 하나만 선택 가능하도록 구현 4. 휴대폰번호 입력칸에서 3자리 혹은 4자리 번호 입력 조건 만족시 다음칸으로 포커스 이동 5. 휴대폰 번호 모두 입력 시 '인증번호 전송' 버튼 활성화 6. '인증번호 전송' 버튼 클릭 시 6자리 수의 랜덤 토큰 생성 ..

[부트캠프] 1일차 ! (feat.HTML과 CSS)

기다려 왔던 부트캠프 1일차. OT도 있고 첫날이니 가볍게 생각했지만.. 쉴틈 없이 강의 듣고 과제 스프린트까지 진행했다. 강의 들으며 코드도 치고 이해가지 않으면 영상을 되돌리고 하다보니 시간이 빠듯하더라.. 우선, 오늘 배운 것을 요약하면, 사실 기억나는 것이라도 정리하자면 아래와 같다. HTML은 약속된 '명령어'이다. 웹 사이트를 만들기 위해서는 웹페이지 구성 언어를 알아야한다. 크게 HTML, CSS, Javascript 이 3가지로 구성되는데, 그중 HTML(Hyepr Text Markup Language)는 네트워크가 연결된 웹페이지에서 문서를 작성하고, 읽고, 공유하기 위해 만들어진 체계이다. HTML은 수 많은 태그의 집합이다. 이 태그는 약속된 명령어로 각 태그별로 다양한 기능을 가지고..

아스키(ASCII)코드와 유니코드(Unicode)

아스키코드와 유니코드, 개발뿐만 아니라 메모장이나 한글파일에서도 자주 등장한다. 자주 듣지만 제대로 알고자 한적은 없어 이번에 개념을 잡고 갈까 한다. 아스키 코드 ASCII, American Standard Code for Information Interchange, 미국 정보 교환 표준 부호 옛날에는 컴퓨터와 소통하기 위해서는 표준 문자가 필요했고 128개의 문자를 사용할 수 있는 아스키코드를 고안했다. 아스키는 기본적으로 영어 알파벳 소문자, 대문자를 표현할 수 있고 아라비안 숫자를 표현할 수 있다. 유니코드 Unicode는 영어뿐만 아니라 전 세계 모든 문자를 컴퓨터에서 일관되게 표현하도록 만들어진 표준 부호이다. ISO/IEC 10646 코드표를 사용함으로써 각 언어와 문자 체계에 따른 충돌 문..