목록CSS/생활코딩 (4)

나의 개발일지

4. 생활코딩으로 CSS 배우기 (4) - 그리드

위의 기획서와 같이 목록과 본문이 나란히 위치하는 레이아웃 디자인하기 1. 태그 : 어떤 의미도 없는 태그, 무색무취와 같은 태그 : division의 약자 NAVIGATION ARTICLE 화면 전체를 쓰는 태그는 자동적으로 줄바꿈이 되어 아래와 같이 나타난다. (*Block level element) 2. 태그 : 태그와 똑같은 목적으로 고안된 태그 : 자기 자신의 콘텐츠만큼 자리를 차지하는 inline element --> 줄바꿈이 되지 않는다! 3. 부피감 알아보기 4. 두 개의 태그를 감싸는 부모 태그 추가 후 id 값 설정 NAVIGATION ARTICLE 5. id 값에 테두리 색상 설정 #grid { border-color: pink; } 6. 두 개의 태그를 나란히 배치하기 #grid {..
CSS/생활코딩 2023. 10. 3. 21:43
3. 생활코딩으로 CSS 배우기 (3) - 박스모델 써먹기

그럴듯한 웹페이지처럼 보이기 위해 디자인 하기 1 . border-bottom을 이용하여 밑줄 긋기 2. margin과 padding을 이용해서 간격 조정하기 (*개발자 도구 이용하여 어떤 값을 조정할지 파악) 의 간격이 알맞게 조정되었다 3. 태그에 border-right을 이용하여 목록 분류하기 ol { border-right: 1px solid gray; } 이렇게만 하면 오른쪽 맨 끝에 테두리가 생기는 걸 볼 수 있는데 원래의 기획대로 목록 바로 옆에 두고 싶다면 width 를 이용하여 태그 크기를 지정하면 된다. ol { border-right: 1px solid gray; width: 100px; } 짜잔~ 4. 테두리와 테두리 사이의 간격 없애기 개발자도구를 이용하여 어떤 것 때문에 여백이 ..
CSS/생활코딩 2023. 10. 3. 21:26
2. 생활코딩으로 CSS 배우기 (2) - 박스모델

화면 전체를 쓰는 태그 vs 콘텐츠 크기 만큼 쓰는 태그 WEB HTML CSS JAVASCRIPT JAVASCRIPT JavaScript is the world's most popular programming language. JavaScript is the programming language of the Web. JavaScript is easy to learn. This tutorial will teach you JavaScript from basic to advanced. 위의 코딩에서 태그는 자동으로 줄바꿈이 되어졌다. 왜냐하면 태그 제목 태그인데 제목 태그는 화면 전체를 쓰는 것이 기본적으로 더 편리하기 때문이다. 그리고 링크가 화면 전체를 쓴다면 링크 앞 뒤의 콘텐츠가 줄바꿈되는 경우 불편..
CSS/생활코딩 2023. 10. 3. 21:08
1. 생활코딩으로 CSS 배우기 (1)

CSS Cascading Style Sheets의 약자 HTML 태그의 골격 부분을 예쁘게 꾸며주는 역할 CSS없이 글자 색을 바꿀 때 heewon park hello 태그는 단지 파란색으로 표현해야 한다는 디자인을 나타낼 뿐 ​ 색을 blue 에서 black 으로 바꾼다면 3개의 코드를 일일이 바꿔야하지만 CSS의 태그를 사용한다면 3개의 중복 코드를 단 하나의 코드를 만들어 중복을 제거할 수 있다 CSS 문법 a { color : red ; } ​ a : 선택자(Selector) color: red ; : 선언, 효과(Declaration) color : 속성(property) red : 값(value) CSS의 여러가지 태그 1. 폰트 색상 바꾸기 Hello 태그 안에 태그를 사용 ​ 모든 의 태그..
CSS/생활코딩 2023. 10. 3. 20:47
이전 Prev 1 Next 다음