Will find a way

들어가기 전평소에 HTML 뼈대를 작성할 때 어떻게하면 CSS를 구현할 수 있을까에만 초점을 두며 HTML 구조를 작성했다. 최근에 포켓몬 카드를 뒤집는 간단한 프로젝트를 진행하면서도 그랬다. 웹 접근성은 신경쓰지 않은 이번 프로젝트를 보고, 한단계 더 나아가서 웹 접근성을 신경쓰고 싶다는 생각이 들었고 이를 어떻게 채울 수 있을까 생각하다가 ARIA, role 라는 것에 대해서 알게됐다. 오늘은 ARIA, role에 대해서 간단히 알아보자. 웹 접근성은 예전에 다룬 글이 있으니 이를 참고하자https://jakapark.tistory.com/entry/%EC%9E%A1%EB%8B%B4-%EC%9B%B9%EC%A0%91%EA%B7%BC%EC%84%B1%EC%97%90-%EB%8C%80%ED%95%B4%E..

들어가기 전나는 평소에 레이아웃을 만들 때 flex로만 구성하기도 한다. grid로도 할 수 있지만 이미 flex에 익숙해져 있어서 grid 사용 경험이 따로 없다. grid로도 할 수 있는 것들은 flex로 다 할 수 있지만 그래도 상황에 따라서는 grid가 더 나을 수 있기도 하다. 그래서 grid를 한번 사용해보고 간단하게 grid에 대해서 포스팅해보려고 한다. Grid 에 대해서grid도 flex처럼 레이아웃을 배치할 때 사용한다.물론 grid로 할 수 있는 것들은 flex에서도 가능하지만flex 와 grid가 편한 경우가 상화에 따라 각각 다르다. flex 는 간단하게 한줄의 레이아웃을 할 때 간편하고grid 는 조금 더 복잡한 2D 레이아웃을 제작할 때 간편하다. (쉽게 말해 1줄로 정렬과 가..

들어가기 전나는 2개의 국비지원 과정을 이수하였다. 첫 번째는 웹퍼블리셔 프론트엔드 과정 두 번째가 풀스택 과정이다.그래서 이게 지금 말할 웹 접근성이랑 무슨 상관이 있을까? 직접적인 관련은 없지만 내가 이 글을 쓰게 된 이유이기 때문에 언급해봤다. 국비교육을 이수하면서 개발을 배우고 싶은 사람으로서는 풀스택 과정이 훨씬 좋았지만 웹접근성을 놓고 봤을 때는 첫번째 국비 과정에서 더 많이 언급을 했고 알려주려고 했어서 기억이 남는다. 2번째 과정을 들으면서 웹접근성에 대해서 내 기억이 조금 흐려지기도 했어서 다시 상기 시키고 싶었다. 단순한 정보글이 아닌 내가 왜 이 글을 포스팅했으며 목적까지도 적고 싶기 때문이다. 내가 만들고 싶은 웹이나 앱은 모든 사람들이 동일한 서비스를 이용할 수 있었으면 좋겠다. ..

목차1. 비트(bit)란?2. 2진수3. 16진수 1. 비트(bit)란?비트는 컴퓨터에서 데이터를 표현하는 가장 작은 단위다. "비트"라는 용어는 "binary digit(2진 숫자)"의 줄임말로,  0 또는 1의 두 가지 값중 하나를 나타낸다. 비트는 주로 8개를 묶어서 사용되며, 이를 바이트(byte)라고 한다. 바이트는 컴퓨터에서 가장 기본적인 데이터 단위 중 하나이며, 문자나 숫자와 같은 정보를 표현하는 데에 사용된다. 2. 2진수 (Binary)- 2진수는 0과 1 두 개의 숫자만을 사용하여 숫자를 표현한다.- 각 자리는 2의 제곱으로 증가한다. 가장 오른쪽 자리부터 2^0, 2^1, 2^2, ... 2^n 순으로 진행된다. ex) 3. 16진수 (Hexadecimal)- 16진수는 0부터 9까..

목차 1. media query란? 2. media query 사용 방법 3. Device에 따른 media query 너비 1. media query 란? 브라우저 화면 크기에 따라 CSS 스타일을 적용할 수 있는 것을 의미한다. 2. media query 사용 방법 @media only screen and (min-width : 400px) { div { display : none; } } media query는 @media (조건문) {스타일 적용} 세부분으로 나뉜다. 위에 코드는 "브라우저 너비가 400px 부터 div 태그에게 display:none 속성을 적용한다. " 는 의미를 가지고 있다. 브라우저의 너비의 조건을 줌으로써 우리는 반응형 페이지를 만들 수가 있다. 3. Device에 따른 ..

목차 1. transition 2. transform 1. transition transition 은 animation과 같이 효과를 줄 때 사용하지만 animation 처럼 구체적으로 애니메이션을 지정하지 못하지만 간단하게 애니메이션 효과를 줄 수 있는 장점이 있습니다. transition에 대해 알아보겠습니다. transition: (property/속성) (duration/지속 시간) (timing-functing/타이밍 기능) (delay/지연) 위에는 transition: 방식입니다. 모든 속성에 변화를 주고 싶으면 transition : all 로 쓰기도 합니다. transition-property : 속성 / transition-duration : 지속 시간 transition-timing-..

animation animation 은 뜻 그대로 동적인 움직임을 줄 때 사용하는 속성입니다. animation 을 속성을 사용하는 방법은 아래와 같습니다. animation : animation이름 시간 진행방식; 위에 예시를 보면 animatioin 이름이 있는데 이를 지정하기 위해서는 keyframes를 알아야합니다. 밑에서 keyframes를 지정하는 방식을 알아보겠습니다. @keyframes animation이름 { 0% { 속성 : 값; } 100% { 속성 : 값; } } keyframes 는 애니메이션 이름을 설정해주면서 어떤 속성이 어떻게 흘러가는지 지정해주는 영화필름과 같은 역할이라고 생각하면 됩니다. 위와 같이 %별로 어떤 속성이 얼마나 진행되는지 지정해줄 수 있습니다. 코드가 어떻게..

인접 결합자 / 형제 결합자 CSS 를 배우면서 우리는 결합자라는 것을 배웠습니다. 결합자라는 것은 두 개 이상의 선택자를 결합하여 동일한 패턴을 만드는 것을 목적으로 합니다. 보통은 직계자손 선택자인 "선택자 > 선택자", 와 "ul li" 요소의 모든 자식을 의미하는 식으로 썼습니다. 오늘은 그와는 다른 "인접 결합자"와 "형제 결합자"에 대해서 알아 보겠습니다. 인접 결합자 인접 결합자는 "+" 를 붙여 사용합니다. 하는 역할은 바로 다음 인접한 태그를 선택해줍니다. 위에 사진에서 의미한 코드는 첫번째 li에 인접한 li 태그를 선택해준 것입니다. 코드 결과를 보면 box 1 다음에 box 2 에 빨간색이 적용된 것을 확인할 수 있습니다. 여기서 중요한 것은 바로 다음에 인접했다는 것입니다. 만약 ..

flex 정리 오늘은 주로 쓰는 display : flex 에 대해서 알아보겠습니다. display : flex 는 블록 요소를 정렬할 때 사용하며 부모요소에 속성을 주어 사용합니다. 지금 화면은 div 태그 안에 p태그 세개를 넣은 것입니다.. 보기와 같이 p태그는 블록요소이기 때문에 너비와 높이를 지정해도 부모태그의 한 줄씩 사용하는 것을 볼 수가 있습니다. 그럼 부모 요소에 display: flex를 줘서 어떤 변화가 있는지 확인해 보겠습니다. display : flex 왼쪽div 태그에 display : flex 를 준 모습입니다. 세로로 정렬됐던 Box 들이 가로로 정렬 된것을 볼수 있습니다. 마치 inline-block 속성처럼 좌우로 나열 된 것을 주는 것을 볼 수 있습니다. display ..

목차 1. 인터넷이란 2. 웹서비스의 발전 3. 웹 어플리케이션 아키텍쳐 MPA (Multi Page Application) SPA (Single Page Application) CSR (Client Side Rendering) SSR (Server Side Rendering) 1. 인터넷이란? 인터넷은 1960년대 군사적인 목적을 가지고 개발이 됐다. 핵전쟁 이후 핵에도 마비되지 않을 통신이 필요하게 되서 해저 광케이블로 설치가 됐으며, 전세계 인터넷의 해외 연결망 트래픽의 약 90% 이상은 해저 케이블 사용한다. 우리가 사용하는 인터넷 웹사이트는 1980년 팀 버너스 리가 개발한 월드 와이드 웹이다. 웹 서버와 웹 브라우저를 개발하고 통신의 규칙과 화면을 구성할 수 있는 프로그래밍 언어를 개발로 월드..