코딩응애의 개발블로그

css가 많이 부족한거 같아서 페어분이 알려주신 유튜버 수코딩님과 내가 예전부터 보던 드림코딩님 두분의 강의를 듣고 웹사이트를 한번 만들어 보았다. 확실히 직접 만드니까 많이 부족하다는걸 깨닫고 더 만들어볼 예정이다. 수코딩: https://youtu.be/33UvhCoPrmc 드림코딩 : https://youtu.be/X91jsJyZofw 이 2개의 영상을 보고 만들었다. 2개 영상을 먼저 보고 각각 영상에서 만드는 웹사이트를 만들고 나서 내가 만들고 싶은 사이트를 2개 영상에 쓰인 코드들을 바탕으로 만들었는데 거의 비슷하긴 하다... 근데 나중에 더 기능들을 추가할 예정! 서론이 길었네 일단 이 글은 웹사이트를 만들면서 몰랐던 개념들이랑 직면했던 문제들을 쓰고 그 문제들을 어떻게 해결을 했는지 쓰는 ..

text-transform css에서 대문자로 또는 소문자로 바꾸는 속성 기본값은 none uppercase : 모든 글자를 대문자로 바꾼다 lowercase : 모든 글자를 소문자로 바꿉니다. .channel .sub2 { text-transform: uppercase; } /* 사용하는 예시 */ 텍스트 여러줄 ... (생략) 으로 하기 .ellipsis { width: 200px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } text-overflow: ellipsis; 를 이용해서 생략을 해야하는데 이 문장 하나 만으로는 생략이 안..

태그 사이트 네비게이션이나 페이지에 대한 정보를 담는 태그 페이지 상단에 위치한다. 보통 하나 이상의 제목 요소(h1~h6)나 사이트 로고, 저작권 정보를 포함. 웹페이지나 특정 글 영역 등 해당 부분의 머리글 역할을 한다. 헤더 내부에는 네비게이션 태그를 사용하기도 함 Home Gallery 태그 보통 제목을 나타내는 태그들을 포함하고 있음 (h1~h6) 자식요소로 포함됨 주제별 영역들을 그룹화 하기위해 사용한다. section요소를 사용하는 예로는 챕터나 탭으로 구분된 대화상자에서 탭된 페이지 논문의 번호가 매겨진 섹션. 홈페이지에서는 소개 뉴스 아이템 연락처 등이 섹션으로 분리 될수 있다. CSS :root :root 가상 선택자라고 한다 마치 클래스 처럼 동작해서 이 각각에 element에 상태에..

강의 들으면서 처음 알게된거 정리했습니다 li 태그 점 없애기 하하 정준하 li 태그를 쓰면 이러한 점이 앞에 생기는데 이 점을 없애는 방법은 . . . 하하 정준하 테두리 경계를 둥글게 만드는 법 마우스를 위에다 올렸을때 뭔가를 해주려면 hover를 이용하는데 여기서 배경색깔을 바꾸는데 이런식으로 테두리가 각져 있을때 이 테두리를 둥글게 만들려면 border radius : ?px; 이런식으로 해주면 된다 물론 스타일 태그 안이나 css에서 해야됨 태그 DreamCoding Home Gallery Wedding FAQ Booking 우선 ol ul 이런 태그들은 웹페이지에서 네비게이션 역할을 한다. 이런 역할을 하는 태그를 네비게이션을 뜻하는 태그 안에다가 넣어주면 그 부분이 컨텐츠를 탐색할때 사용하는..

* 드림코딩님 생활코딩님 강의를 듣고 제 나름 대로 정리한 글입니다. + 구글링에 도움도 받았습니다 Flex box에는 중심축과 반대축이 존재하는데 예를 들어서 수직축이 중심축이라고 한다면 수직축에 반대인 수평축이 반대축이 되는것임 그리고 수직축이 중심축이 된다는 소리는 뭐냐면 아이템들이 위에서 아래로 정렬이 되고 수평축이 중심축이 된다면 왼쪽에서 오른쪽으로 정렬이 된다는 것을 뜻함 Flex box flex box로 만들고 싶다면 display: flex; 라고 적어주면 아이템들이 왼쪽에서 오른쪽으로 정렬이 된다. 1 2 3 4 5 각종 속성값들 ( flex-direction ) flex-direction 은 기본값이 row다 flex-direction : row-reverse; 해주면 오른쪽에서 왼쪽으..

* 드림코딩님 강의 보고 더 궁금한게 있으면 생활코딩님 강의도 찾아보고 구글 검색해서 찾아보고 했습니다 전체 선택자 (Universal Selector) 모든 태그들을 선택한다 태그선택자 영어로는 type selector 라고 한다 (처음알았음;) state 선택자 (의사 클래스 가상 클래스 라고 한다) . . . Button 1 :hover 부분이 state 선택자 attribute 선택자 . . . Naver Google display : inline; 콘텐츠 자체만을 꾸며준다 CSS에서 width나 height 크기를 정해주어도 무시하고 콘텐츠에 크기에 맞춰서 변경이 된다 . . . . 1dfdsfdsfasdfdsafdsaf 2 3 display: inline-block; inline과 마찬가지로 ..

반응형 디자인 화면에 크기에 따라서 웹페이지에 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는것 미디어 쿼리 반응형 디자인을 CSS를 통해 구현 할때 필요한 개념이 미디어 쿼리이고 어떠한 조건을 만족할때만 CSS의 내용이 동작하도록 하는것이 가능하게 하는것 이것을 미디어 쿼리라고 함 . . . Responsive 코드의 재사용 여태했던 style 태그에 내용들을 다른 html에다가 똑같이 적용하려면 복사 붙여 넣기를 똑같이 해주어야 하는데 이게 지금은 페이지 수가 적어서 할만 하지만 엄청나게 많아진다면 아마 할맛이 안날것이다 이러한 중복을 없애기 위해서 새로운 파일 예를들어 style.css 라는 파일을 만들고 그 안에다가 style 태그에 내용을 복사 붙여넣기 해주고 html로 돌아와서 style ..

선택자 League of Legend 클래스 선택자는 하나로 묶는다 class라는 속성의 값은 여러개의 값이 들어올 수 있고(class="saw active") 띄어쓰기로 구분하고 하나의 태그에는 여러개의 속성이 들어올 수 있고() 여러개의 선택자(style 태그안에 선택자들)를 통해서 하나의 태그를 공동으로 제어할 수 있다. 그리고 class 속성값을 해주고 선택자로 쓰려면 위에처럼 앞에 점을 붙여줘야 한다. 근데 글자가 왜 빨간색일까 하면 순서 때문에 그런데 active 선택자가 더 나중에 위치해 있기 때문에 글자색이 빨간색이 되는 것이다 둘의 순서를 바꾸면 글자색은 회색이 된다 그래서 클래스 선택자보다 더 높은 우선순위에 있는 선택자를 이용해야 하는데 바로 id 선택자 이다 League of Leg..