전체 글117 HTML Semantic Elements Semantic Elements란? 기존 HTML에서는 영역을 나눌 때 div 태그만 사용하여 나누는 경우가 많았다. 하지만 검색 엔진이 HTML 문서를 수집하여 분석하거나, 시각장애인을 위해 스크린 리더 등 HTML 문서를 분석해야 할 여러 상황에서 각 영역이 어떤 영역인지 알아내기 힘들었다. 따라서 div와 같은 태그 대신 의미를 갖고 있는 태그가 탄생하게 되었고, 이런 태그들을 명시적 요소라는 뜻의 Semantic Elements라고 한다. ※ 다만 낮은 버전의 브라우저에서는 지원하지 않아 주의해야 한다. 기본적인 구성 컨텐츠 상단에는 header, 하단에는 footer를 배치하며, header 아래에 nav(navigation links)를 배치한다. section 혹은 article을 이용하여 .. 2021. 7. 16. 자주 사용되는 HTML 태그 정리 Heading This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6 문서의 제목은 제목을 뜻하는 heading의 약자인 h에 숫자 1~6까지를 붙여 사용한다. 숫자가 작을수록 큰 제목을 나타내며 글자의 크기가 커진다. 또한 강조를 위해 두꺼운 폰트로 표시된다. Paragraph Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur .. 2021. 7. 15. Sorting I - Insertion Sort 정렬된 데이터는 정렬되지 않은 데이터에 비해 여러가지 장점이 있다. 탐색도 정렬되지 않은 데이터는 O(n), 정렬된 데이터는 O(logn)으로 정렬된 데이터가 훨씬 빠르다. 이 외에도 여러 장점 때문에 데이터를 정렬할 필요가 있다. 정렬 방식에 어떤 것들이 있고, 복잡도는 어떤지 하나씩 알아보자. Insertion Sort 삽입 정렬은 element 하나씩 적절한 위치로 삽입하며 정렬하는 알고리즘이다. Example 위와 같은 정수 배열을 삽입 정렬을 통해 오름차순으로 정렬해보자. 먼저 첫번째 element는 정렬이 되어있다고 가정한다. 다음으로 정렬되지 않은 element, 2를 올바른 위치에 삽입해준다. 배열의 맨 앞에 오거나(index=0) 앞의 element보다 key 값이 클 때까지(E[cur-.. 2021. 4. 15. Searching - Sequential Search, Binary Search 배열에서 원하는 값을 찾는 탐색 방법은 여러가지가 있다. 배열 안의 데이터가 정렬되어 있는지, 아닌지에 따라 많은 시간 차이가 발생하기도 한다. 어떤 탐색 방법들이 있고, 각각의 상황에 어떤 방법이 적합한지 분석해보자. Sequential Search 가장 단순히 생각할 수 있는 방법인 순차 탐색 알고리즘이다. 순차 탐색은 말 그대로 목표한 값을 찾을 때까지 배열 안의 모든 데이터를 순차적으로 비교하는 방법이다. int seqSearch(int* E, int n, int K) { int ans = -1; for (int i = 0; i 6 찾고자 하는 값이 더 작기 때문에 가운데 값 7의 왼쪽까지로 구역을 좁혀 다시 반복한다. 다음 중간값은 2로 찾고자 하는 값 6이 더 크기 때문에 중간값 2의 오른쪽까.. 2021. 4. 14. Algorithm Analysis - Correctness, Complexity, Optimality 컴퓨터 알고리즘이란 문제를 해결하기 위해 정의한 Instruction Sequence를 말한다. 알고리즘을 작성했다면 알고리즘이 문제의 요구조건을 만족하는지(Correctness), 얼마나 많은 연산이 필요한지(Complexity), 문제의 복잡도와 얼마나 가까운지(Optimality) 분석해야 한다. 그럼 이제 알고리즘을 세워보고 어떻게 분석하는지 알아보자. Algorithm n개의 entry를 갖는 non-ordered array E에서 index 값이 K인 entry를 찾는 문제를 해결해보자. int seqSearch(int* E, int n, int K) { int ans, index; ans = -1; for (index = 0; index < n; i++) { if (K == E[index]).. 2021. 4. 10. 2020 블로그 연말정산 2020년은 이 블로그에 꽤 많은 변화가 있었던 의미있는 해였던 것 같다. 게시글도 많이 늘었고, 조회수도 많이 늘었고, adsense 심사도 통과되어 광고도 달았다. 연말을 맞아 2020년에 있었던 이런 변화들과 블로그에 대한 내 생각을 기록해보려고 한다. 게시글 2019 / Android 16개 + OS 16개 + DB 1개 = 총 33개 2020 / Android 41개 + DB 15개 + 자료구조 11개 + 네트워크 4개 + 웹 4개 + 기타 4개 = 총 79개 블로그는 2019년 학교에서 들은 OS 수업 내용을 정리해 올리면서 시작하게 되었다. 그 뒤로 부스트코스 안드로이드 강좌에서 배운 내용들도 추가로 정리해서 올리게 된다. 하지만 2학기부터 학교 수업을 듣는다고 블로그에 소홀해진 것 같다. .. 2021. 1. 4. 부스트캠프 2020 : 멤버십을 마치며 총 21주, 약 5개월의 부스트캠프 모든 과정이 지난 21일(월) 네트워킹데이를 마지막으로 끝이 났다. 챌린지 과정에서는 개발자가 되기 위한 기본적인 지식들과 공부하는 방법을 익혔다면, 멤버십 과정에서는 본격적으로 풀스택 웹 개발자가 되기 위한 지식과 협업 과정을 배웠다. 멤버십 과정은 크게 개인프로젝트 과정과 그룹프로젝트 과정으로 나뉜다. 각 과정을 진행하면서 느낀 점을 간단하게 남겨보려고 한다. (교육과정에 대한 세부적인 내용은 부스트캠프의 자산이기 때문에 적지 않겠습니다) 개인프로젝트 개인프로젝트에서는 웹 개발을 위한 기본적인 내용들을 배우고 익혔다. 공부해야 하는 내용이 많긴 하지만 챌린지 과정처럼 빡세지는 않았다. 하지만 상대적으로 개발에 쏟아야 하는 시간이 많아졌기 때문에 시간이 없기는 마찬가.. 2020. 12. 31. 부스트캠프 2020 : 챌린지에서 멤버십으로 챌린지 후기 챌린지 4주는 개발자가 되기 위한 기초 지식들을 모두 습득하기엔 짧은 시간이었다. 매일 주어지는 미션은 하나의 키워드를 기준으로 관련된 개념을 학습하도록 설계되어 있다. 이 키워드 하나 하나가 모두 '아, 이건 진짜 중요하지' 라는 말이 나올 정도로 중요한 개념들이었다. 이런 중요한 개념들을 하루만에 진짜 내것으로 소화하는 것은 힘든 일이었다. 매일 새로운 개념을 공부해야 하니 마치 아까 먹은 점심도 소화가 안됐는데 저녁을 먹는 기분이었다. 하지만, 돌이켜보니 챌린지 과정의 목표는 모든 개념들을 소화해서 내 것으로 만드는 것이 아니었다고 생각한다. 부스트캠프는 위와 같이 지식 전달이 목적이 아니라, 문제를 해결하는 방법을 배우는 곳이다. 주어진 시간 안에 미션을 수행하려면 중요한 개념들을 짧.. 2020. 8. 28. Media Query를 이용하여 반응형 웹 구현하기 Media Query란? 예전에는 웹 페이지를 PC 환경에서만 접근했지만, 요즘은 다양한 기기에서 웹 페이지에 접근하고 있다. 따라서 다양한 기기의 화면 크기에 따라 웹 페이지 내 컨텐츠의 크기를 조절할 필요가 있다. 이 때, 특정 조건에서만 CSS 코드를 적용시키는 Media Query를 사용하면 이를 구현할 수 있다. 사용 방법 위와 같이 CSS 부분에 @media(조건){내용} 형태로 적어주면 된다. 예를 들어 위 코드의 경우 window 너비가 800px 이상일 경우 div 태그를 보이지 않게 한다는 뜻이다. 너비가 800px가 넘어가면 div로 구분한 부분이 사라지는 것을 볼 수 있다. 이렇게 괄호 안의 CSS 코드가 실행될 최소 너비를 지정하는 것 뿐만 아니라 다음과 같이 다양한 조건이 가능하.. 2020. 8. 2. 이전 1 2 3 4 ··· 13 다음
