본문 바로가기

분류 전체보기53

[HTML] 첫발 내딛기 <1. 구조 와 요소> HTML 구조 HTML은 우리가 브라우저에서 보는 내용들을 작성할 수 있는 웹 언어로 HTML 문서를 작성해서 정보들을 브라우저에 표시할 수 있다. HTML의 기초 구조는 4개로 나뉘어 있다. 문서 타입 문서의 시작 문서의 머리 문서의 몸 문서 타입 HTML에서 문서타입은 브라우저가 페이지를 열기 전에 필요로 한다. 이 문서 타입으로 브라우저는 이 HTML 문서를 어떻게 해석해야 하는지 알 수 있다. HTML5에서는 만 사용하면 된다. 문서의 시작 HTML문서는 시작점이 필요하다. 태그로 문서를 시작할 수 있다. 여기서 중요한 포인트! 시작이 있으면 끝도 있는 법. HTML문서의 끝은 으로 끝낼 수 있다. 문서의 머리 HTML문서의 머리에는 페이에 관한 정보들이 들어간다. 머리에는 대체로 페이지 제목, .. 2023. 1. 27.
[CSS] Flexbox을 사용해서 정말 예뻐지는 웹 레이아웃 만들기! CSS flexbox는 웹 페이지의 항목들을 유연하게 배치할 수 있는 방법을 제공한다. 플렉스 컨테이너를 사용하여 항목들을 수평적이거나 수직적으로 정렬할 수 있고, 정렬 순서도 바꿀 수 있다. CSS flexbox를 사용하면 웹 페이지의 레이아웃을 유연하게 제어할 수 있게 된다. flexbox를 사용하면 좋은점 코드가 간결해지고 쉽게 작성할 수 있다. 항목들을 수평적이거나 수직적으로 정렬할 수 있어서 레이아웃 제어가 용이해진다. 정렬 순서도 쉽게 바꿀 수 있어서 유연한 레이아웃 제어가 가능하다. 가로 정렬과 세로 정렬을 쉽게 제어할 수 있어서 웹 페이지의 레이아웃을 유연하게 제어할 수 있다. flexbox를 사용하는 방법 아래 HTML 샘플을 사용해서 flexbox의 여러 속성들과 그 값들로 레이아웃을 .. 2022. 12. 24.
[HTML] srcset 속성을 사용해 웹 페이지의 성능과 사용자 경험을 개선해보자! srcset 속성은 HTML 이미지 태그에서 사용되는 속성으로, 여러 개의 이미지 파일을 지정하여 사용자의 기기 및 연결 속도에 따라 적절한 이미지를 선택할 수 있게 해준다. 이를 통해 웹 페이지의 로딩 속도를 향상시키고, 사용자 경험을 개선할 수 있다. srcset 속성을 사용하면 좋은 점: 웹 페이지의 로딩 속도 향상: 적절한 이미지만 로딩하기 때문에, 웹 페이지가 빠르게 접속될 수 있다. 사용자 경험 개선: 이미지의 크기가 적절한 기기에서 제대로 보일 수 있기 때문에, 사용자의 이미지 경험이 개선된다. 반응형 웹 디자인 지원: srcset 속성을 사용하면, 적절한 이미지를 선택할 수 있기 때문에, 반응형 웹 디자인을 지원할 수 있다. 용량 절감: srcset 속성을 사용하면, 적절한 이미지만 선택하.. 2022. 12. 21.
[웹 접근성] 쉽게 배워서 전문가 처럼 사용하기 지난 글에서 왜 웹 접근성을 배워야 하는지 간단하게 알아봤다. 그럼 이젠 웹 접근성을 어디서 어떻게 시작해야 쉽게 배울 수 있는지를 알아볼 차례다. 당연한 말 같겠지만, 웹 접근성을 쉽게 배우려면 쉬운 것부터 배우면 된다. 그런데 그 쉬운 게 배울게 좀 많다는 게 함정이다. 그래도 쉬워서 금방 배울 수 있다. 본격 적으로 배우기 전에, 어떻게 배울 지도 살펴보자. 개인적으로 무언가를 배울 때 뭘 먼저 배우고, 어떻게 배울지 생각해 본다. 배우는 방법이 어렵거나 복잡하면 쉬운 것도 어려워지기 때문이다. 지난 3년 동안 웹 접근성을 공부하고 사용해보니 제일 쉽게 배우는 방법은 직접 보고 테스트해보는 거다. 직접 하나하나 테스트해보면 왜 접근성이 좋은 방식과 그렇지 않은 방식의 차이를 경험해 볼 수 있어 빨리.. 2022. 12. 6.
[웹 접근성] 웹 개발자가 접근성을 꼭 알아야 하는 이유 웹 개발을 처음 시작했던 이미 직업으로 하고 있던, 모든 웹 개발자는 웹 접근성을 꼭 알아야 한다. 웹 접근성이 뭐길래 이렇게 강조하는 걸까? 웹 접근성을 한 마디로 설명하자면 "웹 사이트에서 제공하는 정보를 모두 동등하게 접하고 이용하는 것"이라고 할 수 있겠다. 여기서 모두 동등하게 가 웹 접근성의 본질이다. 우리는 웹 사용이 숨 쉬는 것만큼 당연한 시대에 살고 있다. 일상의 대부분이 웹에서 이뤄지고 있기 때문이다. 고향 가는 기차표를 살 때, 음식을 주문할 때, 내가 좋아하는 아이돌의 영상을 볼 때, 등등 많은 일들을 웹에서 할 수 있다. 우리한테는 이렇게 쉽고 편한 웹이지만 누군가에게는 어려울 수도, 거의 사용 불가능할 수도 있단 걸 생각해본 적 있나? 예를 들어보자, 부산으로 여행 가려고 기차표.. 2022. 10. 11.
Javascript | 데이터 타입 모음 자바스크립트의 기본 데이터 타입들을 알아보자!! 자바스크립트에는 여러 개의 데이터 타입들이 존재합니다. 그러면 어떤 데이터 타입들이 존재하고 어떻게 사용할수있는지 알아보겠습니다. 숫자 타입 자바스크립트에서 숫자를 사용해서 간단한 수학을 할 수 있고 또 자바스크립트에 내장돼있은 수학 함수들을 사용해서 sin/cos 같은 수학도 할 수 있습니다. 우리가 아는 기본 수학 기호들은 더하기(+), 빼기(-), 나누기(/), 그리고 곱하기(*) 가있죠 그런데 코딩에서는 수학기호 하나가 더 있습니다, 바로 모듈러(%)입니다. 모듈러는 나누기와 비슷하지만 반대로 작동합니다. 나누기는 나누어진 숫자를 주고 (30 / 3 = 10) 모듈러는 나머지 숫자를 줍니다 (30 % 3 = 0) 자바스크립트 자체에 있는 수학 함수를.. 2021. 8. 9.
Javascript | 자바스크립트, 이건 뭐지? 어서 와, 자바스크립트는 처음이지? 안녕하세요 Javascript(자바스크립트)의 세계로 오신 걸 환영합니다 자바스크립트는 웹 개발의 꽃 이라고 할 수 있는 부분인데요 웹 브라우저에서만 작동되는 언어로 웹 페이지에서 유저의 행동에 반응할때 사용됩니다 예를 하나 들어볼게요 다크모드 아시죠? 웹사이트의 전체적 색이 어두워지는 거 이 다크모드 버튼을 클릭했을 때 웹사이트의 스타일(CSS)을 바꾸는걸 자바스크립트가 해주는 겁니다 이 외에도 정말 많은 일들을 할수있는데요 어떤 것들을 할 수 있는지 알아보기 전에 자바스크립트를 어떻게 사용하고 어떻게 작성하는지를 먼저 알아볼게요 오늘은 처음이니까 제일 기본들만 알아볼게요 자바스크립트 사용하기 자바스크립트는 두 가지 방법으로 사용할 수 있습니다 첫 번째는 HTML의 .. 2021. 6. 21.
Chrome(크롬) 브라우저 스마트하게 사용하기 크롬 브라우저의 새로운 기능들 알아보기 안녕하세요 최근에 발견한 크롬 브라우저의 새로운 기능들을 알려드릴까 해요 이미 알고 계시는 분들도 있겠지만 모르고 계신 분들을 위해서 정리해 봤습니다 1. 탭 관리 인터넷 하다 보면 많이 열려있는 탭들 이제는 탭 이렇게 정리해 보세요 1. 탭에 우클릭 후 '새로운 그룹에 추가' 2. 그룹 이름, 색 정하기 3. 그룹 만들기 성공. 같은 방식으로 새로운 그룹을 만들거나 다른 탭을 만든 그룹에 추가해 주세요 이렇게 정리하고 나면 이렇게 변합니다 그룹 이름을 클릭하면 이렇게 최소화됩니다 필요한 브라우저를 찾으려면 브라우저 서치 창에서 찾을 수 있습니다 2. QR코드 주소창을 클릭하시면 맨 오른쪽에 QR코드 아이콘이 있습니다 이거는 현재 보고 있는 페이지의 주소를 QR코드.. 2021. 6. 9.
CSS 쉽게 배우기 | CSS만으로 애니메이션 만들어 봤니? CSS만으로 재밌는 애니메이션 만들기 안녕하세요 오늘은 CSS편의 마지막으로 애니메이션을 알아볼게요 CSS로 애니메이션이라... 디즈니 같은 애니메이션은 아니지만 재미있는 웹사이트를 만들기는 충분하죠 CSS의 애니메이션을 쉽게 이해하는 방법은 플립북 애니메이션을 생각하시면 됩니다 여러 장의 종이를 사용하는 대신에 CSS 애니메인션에서는 "xx부터 xx까지"라는 콘셉트를 사용합니다 이 범위안에서 요소의 스타일과 애니메이션의 반복, 그리고 속도를 조절하는 거죠 애니메이션을 사용하려면 애니메이션을 넣고 싶은 요소에 애니메이션 속성들을 정하고 키 프레 임안에 바꾸려는 스타일들을 작성하면 됩니다 애니메이션 속성들 알아보기 애니메이션에 필요한 속성들로는 animation-name (애니메이션 이름) animatio.. 2021. 6. 5.
반응형

티스토리툴바