Dongi_coding 동기_코딩

안녕하세요 동기 여러분! 오늘은 type vs class vs ID에 대해 싸움을 붙여봅시다! Specificity type과 class, id 모두 같이 적용한다면 무엇이 적용될까요? ROUND 1 type vs class vs id 승자는 누구인가! type이 승리시 빨간 글씨 class가 승리시 파란 글씨 id가 승리시 초록 글씨가 나오게 설정해두었습니다. h1 { color: red; } .blueclass { color: blue; } #greenclass { color: green; } 결과는? id의 승리!!! ROUND 2 type vs class 승자는 누구인가! type이 승리시 빨간 글씨 class가 승리시 파란 글씨가 나오게 설정해두었습니다. h1 { color: red; } .bl..

안녕하세요 동기 여러분! 오늘은 pseudo-class 가짜 클래스에 대해 알아보도록 합시다! Pseudo-class HTML에 input 태그를 넣어 실행하면 아래와 같은 화면이 나옵니다. 네모 박스 안에 텍스트를 넣기 위해 클릭을 하면 아래와 같이 네모 박스가 짙게 변합니다. 뭬야? HTML에 a 태그를 넣어 실행하면 아래와 같은 화면이 나옵니다. 이를 클릭할 때도 색이 변하고 돌아와도 링크의 색이 변합니다. 뭔가 적어보시오! 또한 HTML에 submit form을 만들어 실행하면 아래와 같은 화면이 나옵니다. 이때 제출에 마우스를 올려두어도 색이 변하고 제출을 누르면 색도 변하고 네모 박스도 짙어집니다. 위와 같은 활성화 된 상태도 CSS에서 꾸미거나 조절할 수 있는데 그것이 바로 오늘 알아볼 가짜..

안녕하세요 동기 여러분! 오늘은 속성(Attribute)에 대해 알아보도록 합시다! Attribute HTML에는 엄청나게 많은 속성들이 있습니다. MDN Web Docs에 가보면 Attribute list를 정리해두었는데 영어 실력 테스트 겸 한번 보시길 추천합니닼ㅋㅋ 전 읽다가 포기 링크 : https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes HTML attribute reference - HTML: HyperText Markup Language | MDN Elements in HTML have attributes; these are additional values that configure the elements or adjust their ..

안녕하세요 동기 여러분! 오늘은 ID를 알아봅시다! ID class가 HTML의 요소를 그룹으로 묶어서 굵직하게 스타일을 변경해주는 역할을 한다면 (포병 부대ㅋㅋ) id는 HTML의 요소를 하나하나를 집약적으로 스타일을 변경해주는 역할입니다. (특수 부대ㅋㅋ) 생김새 HTML 코드 빨간색입니다. CSS 코드 #red { color: red; } class는 앞에 점을 하나 붙였었는데 id는 #만 하나 붙여주면 됩니다. id는 여러 개가 적용이 안됩니다. Class와 동일한 방법으로 두 가지를 넣어서 실행을 했더니!!! 아무것도 적용되지 않은 모습을 확인할 수 있었습니다. 오늘의 느낌 코로나가 다시 기승을 부리고 있습니다. 다들 건강 조심하세요! 토론토도 일요일부터 restriction을 강화한다고 하네요..

안녕하세요 동기 여러분! 오늘은 클라스에 대해 알아보도록 하겠습니다. 일전에 다룬 적이 있어서 새로울 건 없지만 기본은 탄탄한 게 좋으니까요! Class 제가 포스팅한 [HTML] Attributes에 들어가 보면 HTML에는 자체의 속성을 정할 수 있는 기능이 있습니다. 바로 ID입니다. 링크 : https://dongi-coding.tistory.com/71 [HTML] Attributes 살람 알라이쿰! 킹덤 오브 헤븐이라는 영화에 보두앵 4세와 살라딘의 만남이 끝나고 서로에게 하는 인사말입니다. 살라딘이 알라이쿰 살람! 하면서 뒤돌아가는 장면은 명장면 중에 명장면인데, dongi-coding.tistory.com 그런데 말입니다. HTML과 CSS사이에 가장 많이 사용하는 연결(?) 속성은 cla..

안녕하세요 동기 여러분! 오늘은 CSS에서의 타입이 뭔지 알아보도록 합시다! Type { color: red; } CSS에서 이렇게 생긴 친구들을 선언문(declaration)이라고 합니다. 이 친구들의 기능은 상당히 중요한데요, 왜냐하면 선택된 HTML 요소의 스타일을 바꾸어 주기 때문입니다. 선택된 HTML의 요소는 바로 선언문 앞에 붙는 HTML의 요소입니다. p { color: red; /* 여기서는 p가 선택된 요소 */ } h1 { color: blue; /* 여기서는 h1이 선택된 요소 */ } 위에 나온 코드가 바로 타입 셀렉터(type selector) 사용의 예시라고 할 수 있습니다. 요소의 타입은 p, h1 -> HTML의 , 태그 - 구조는 이해가 가는데 말로 설명이 참 어렵네요....

안녕하세요 동기 여러분! 오늘은 CSS 파일에서 스타일을 작성하는 방법에 대해 알아 봅시다. (다 아는거라 그냥 빨리 ㄱㄱ) External Stylesheet h1 { color: red; } 링크가 되어 있는 파일이름.css에 위 방식으로 적으면 끝납니다... ..허허허 제가 배우고 있는 모든 내용은 CODECADEMY의 내용으로 저는 복습을 하고 있는 학생입니다. 링크 : https://www.codecademy.com/ Learn to Code - for Free | Codecademy Learn the technical skills to get the job you want. Join over 50 million people choosing Codecademy to start a new care..

안녕하세요 동기 여러분! 오늘은 이라는 태그를 사용해서 스타일을 꾸며보는 방법에 대해 알아봅시다! Internal Stylesheet 저번 포스팅에서는 인라인에 스타일을 적용해서 해당하는 태그의 스타일만 바꾸어 보았습니다. 문서 전체를 걸쳐 모든 의 색을 파란색으로 바꾸려면 어떻게 해야 할까요? 물론, CSS 파일로 넘어가서 설정을 해줘도 되지만 HTML 코드에서도 해줄 수가 있습니다. 생김새 HTML 코드 아무 곳에 태그를 쓰고 CSS 코드 방식으로 코드를 써넣어 주면 됩니다. 결과는??? 4가지 경우(헤드 위, 헤드 안, 바디 안, 푸터 안) 모두 똑같은 실행화면이 출력됩니다. 그래도 한눈에 알아보기 위해서는 헤드 안에 넣는 게 가장 좋아 보입니다. 오늘의 느낌 오늘 점심은 A&W에서 엉클 버거를 사..

안녕하세요 동기 여러분! 오늘은 인라인 스타일(HTML에서 CSS 코드를 바로 적용하는 방법)에 대해 알아보도록 합시다! Inline Styles CSS와 HTML은 확실히 다른 언어이지만 얘들은 떼어낼래야 떼어낼 수가 없는 단짝 친구이기 때문에 마치 순대국밥집이 몰려있는 시장에 있는 식당에 손님이 왔는데 밥이 없어서 급하게 옆 식당에서 밥을 빌려오는(?) ㅋㅋㅋ 그런 일이 가끔 일어납니다. 아니면 말고... HTML라는 식당에서 바로 CSS 식당의 밥을 빌려오는 기능이 있는데, 그것은 style 속성을 사용하는 것입니다. 아래의 코드를 보도록 합시다. 티끌모아 티끌이다! 시작 태그(opening tag)안에 style 속성을 넣어주고 color라는 프로퍼티(property)를 넣어주고 값(value)을..

안녕하세요 동기 여러분! 오늘은 CSS의 생김새에 뜯어 보도록 합시다! CSS Anatomy Selector/opening tag p { color: green; } 위의 CSS 코드를 HTML에 바로 쓰게 되면 가는 말이 고우면 얕본다! 위와 같이 쓸 수 있습니다. 여기서 p는 selector이고 이 opening tag입니다. Selector : 스타일을 할 요소의 이름입니다. p와 h1같이 정해져 있는 태그들은 CSS 코드에서 p {}나 h1 {}와 같은 방법으로 작성을 하지만 id값은 #id값 class값은 .class값으로 작성합니다. 아래의 코드에 예시가 있습니다. Opening tag : 시작 태그 애~뽀올 어흥 #apple { color: red; } .bear { color: brown;..