html5 [HTML/CSS] 개톡 프로젝트 1일차(figma - 계획 및 구상, 파트 분배) 개톡은 지금까지 웹 스터디에서 배운 HTML과 CSS를 활용해, 톡 서비스를 구현을 목적으로 한 프로젝트이다. 무엇보다 인생에서 처음으로 github를 활용했던 첫 협업 프로젝트여서 너무 설렜다. 이 설레는 마음의 초심을, 프로젝트가 끝날 때까지 지니는 것을 목표로, 본격적인 1일차! 계획 및 구상을 진행했다. 계획 및 구상) - 사용 툴 프로젝트에 있어서 가장 중요하고 튼튼해야하는 부분이다. 협업에서는 더더욱 서로가 추구하고자 하는 결과물의 방향성을 정해 나가고, 조정해야 하기 때문에 가장 신경써야 하는 부분이다. 다른 것 보다도, 우리 팀은 협업을 중요시했기 때문에, 모두가 동시에 의견을 제시하고 계획을 적어나갈 수 있는 공유 화이트보드 서타일의 figma 사이트를 사용해 진행했다. https://w.. 2021. 8. 7. [HTML&CSS] 웹 프로젝트 12일차! (friends.html & .css ) 지난 시간에 이어 이번엔 friends.html을 만들어 보았다. 그리고 세분화한 css파일을 적용해 아래와 같은 화면처럼 보이게 했다. 이번에도 역시 HTML을 작성하기 전 어떻게 박스를 입힐지에 대한 구상부터 했다. friends.html ) 확실히 지난 index.html보다는 더 복잡해 졌다... ㅎㅎ 쨋든!! 이번에도 font awesome의 icon을 이용해서 아이콘들을 넣어주었고, text는 span태그를 사용했다. 천천히 큰 div부터 차례차례 잡아가다보면 어느새 완성!! friends.html 코드) status-bar의 class를 저번 index와 똑같이 해서 css가 적용된 상태이고, 추가적으로 user-component부분이랑 nav-bar 부분 그리고 no-mobile 부분 세 .. 2021. 7. 21. [CSS] 웹 프로젝트 11일차! (index 부분 css 작업) 지난 시간에는 아래 화면의 html, 즉 뼈대를 완성했다. 이번에는 본격적으로 css를 사용해 아래 화면처럼 이쁘게 보이도록 해 보았다!! 우선 모든 화면에 적용해야 하는 status-bar부터 시작! 아! 그 전에 우선, 브라우저의 기본 세팅값을 초기화를 위한 reset.css파일을 먼저 추가해 주어야 한다!! rest.css) status-bar) 우선 위 화면처럼 적당한 간격으로 icon의 위치를 설정해주어야 한다. 이럴 땐 무엇을 쓴다? --> 바로 flex!!! icon의 부모요소인 .status-bar에 flex를 지정해 주었고 justify-content:center;를 적용했다. 그러면 중앙에 아이콘들이 모여있는 것을 볼 수 있는데 이럴 때 사용할 수 있는 스킬이 바로... width:33.. 2021. 7. 20. [HTML] 웹 프로젝트 3일차! (기본 structure & label) 오늘은 3일차 HTML의 마지막 강의들을 보는 날이다. 오늘은 HTML의 기본 구조와 label 그리고 attributes들을 살펴보았다. 모든 태그와 attributes을 살펴볼 수 있는 사이트 https://developer.mozilla.org/ko/docs/Web/HTML HTML: Hypertext Markup Language | MDN HTML(HyperText Markup Language)은 웹을 이루는 가장 기초적인 구성 요소로, 웹 콘텐츠의 의미와 구조를 정의할 때 사용합니다. HTML 이외의 다른 기술은 일반적으로 웹 페이지의 모양/표현 (CSS), 또는 기 developer.mozilla.org HTML의 모든 태그와 속성들을 외울 필요 전혀XXX 필요할 때마다 찾아서 꺼내 쓰면 된다.. 2021. 7. 7. [HTML] 웹 프로젝트 2일차! ( tag & attributes ) TAG ) HTML을 구성하는 가장 문법적인 요소이며, 기본적인 형태는 이다. - 시작 태그 - 종료 태그 예시) 이런식으로 태그를 선언할 수 있다! 하지만 html안에서 이해할 수 없는 태그라면 태그명으로써 저장이 되긴하지만, 태그가 가지고 있는 특성이 웹사이트에 반영되지 않는다. 그렇다면 html이 이해할 수 있는 태그에는 무엇이 있을까? - , , , , , 문서의 정보 계층을 구조화하는 태그 -> 숫자가 낮을수록 더욱 중요한 제목임을 의미한다. - 밑줄을 쳐주는 태그 - -> unordered list 순서가 없는 리스트를 의미한다. - -> ordered list 순서가 있는 리스트를 의미한다. - -> list 리스트의 항목을 의미한다. 이런식으로 태그로 감싼 list 항목들은 점으로 표시되고.. 2021. 7. 6. 이전 1 다음
