coding 265
[꿀정보] 코딩야학 7기
안녕하세요. 플입니다. 코딩 야학의 마지막 학기가 열렸다고 합니다. 1. 코딩야학 7기 https://youtu.be/HFygn_c9Dk0 7기를 마지막으로 코딩 야학이 작별인사를 한다고 합니다. 코딩을 전혀 모르시는 분들, 알지만 어디에 써야 할지 헷갈리시는 분들 이번 7기의 학우가 돼보시는 건 어떨까요? 새로 배우시는 분들도 프로젝트를 진행하시는 분들도 모두 참여 가능하니 관심 있으신 분들은 신청해보셔도 좋은듯합니다. 코딩 야학으로 많은 도움받았는데 이렇게 마지막 학기라고 하니 아쉬운 마음이 가득입니다. 시작이 있으면 끝도 있는 법. 생활코딩의 새로운 야학을 응원합니다! 그럼 이만. 총총.
[반응형] 포트폴리오 사이트
안녕하세요. 플입니다. 포트폴리오 사이트 리뉴얼을 완성했습니다 1. 디자인 전체 디자인이에요. 반응형 홈페이지라 pc버전, 태블릿 버전, 모바일 버전, 세 가지 모두 있답니다. 이번엔 노랑과 청록을 주요 컬러로 해서 디자인을 진행해봤어요. 네모 모양을 사용해 깔끔한 느낌을 주도록 노력했습니다. 포트폴리오 취지에 맞게 가장 잘 보이는 것은 작업물이도록 신경 썼어요. 2. 주소 http://ssimplay.com/ ssimplay ssimplay.com 도메인 주소는 이전과 동일하답니다. 직접 방문하여 여러 기능들과 포트폴리오를 구경해주세요~ 3. 포트폴리오 페이지 마지막으로 포트폴리오 페이지의 이미지를 올려보고 마무리하겠습니다. 그럼 이만. 총총.
[html] 뷰포트 설정하기
안녕하세요. 플입니다. 오늘은 뷰포트를 설정해보겠습니다. 1. 뷰포트(viewport) 뷰포트는 모바일 화면을 위해 꼭 필요한 태그입니다. 뷰포트를 설정 안 했을 때 화면입니다. 뷰포트를 설정했을 때 화면입니다. 어떤 차이가 있는지 확실히 느껴지시죠? 2. 뷰포트 설정 위에도 같은 코드를 적었는데요 이 메타태그를 태그 안에 넣어주시면 설정 완료입니다. 저렇게 메타태그를 넣어줍니다. 그럼 이만. 총총.
[css] 첫 번째 태그 선택하기
안녕하세요. 플입니다. 오늘은 선택자를 이용해 첫 번째 태그를 선택해보겠습니다. 1. html보기 All Responsive PC Etc 먼저 html 코드를 한 번 살펴보겠습니다. 과 를 이용해 만든 리스트입니다. 여기서 첫 번째 태그만 선택해보겠습니다. 2. first-child li:first-child{ margin-left:0; } li:first-child를 이용해 첫 번째 를 선택할 수 있습니다. 첫 번째 에 margin-left:0을 입력해 왼쪽 마진을 없애주었습니다. 이미지를 보시면 첫 번째 만 왼쪽에 여백이 없는 것을 알 수 있습니다. 이렇게 전체가 아닌 한 개만 따로 값을 주고 싶을 때 이런 선택자를 사용합니다. 그럼 이만. 총총.
[css] display를 이용한 가운데정렬
안녕하세요. 플입니다. 오늘은 가운데 정렬을 조금 다른 방법으로 진행해보겠습니다. 1. display ul li{ display:inline-block; } 옆으로 나열하는 방법은 여러가지가 있는데요. 보통은 float:left를 사용하죠. 하지만 float:left를 사용하면 태블릿이나 모바일 사이즈에서 가운데 정렬을 하기 어려워집니다. 이럴때 display:inline-block;을 사용하면 text-align을 이용해 쉽게 가운데 정렬을 할 수 있습니다. (정말 혁명적...) inline-block은 inline속성과 block속성을 모두 가지고있는데 inline속성이라 각 태그들이 옆으로 나열되고, block속성도 있기 때문에 내부에서는 패딩속성이 잘 들어갑니다. 2. text-align ul{ ..