본문 바로가기

Web/Css31

*매우중요 css - CASCADE(순차적용), SPECIFICITY(상세적용) css에 매우 중요한 개념을 알게되었다. CASCADE라는 개념이다. 쉽게말해서 css를 html에 적용시키려면 필연적으로 의 형태로 연결시키게 된다. 만약에 main.html에 연결된 css가 3개가 있을때 main.html의 head부분에는 3개의 link가 있을것이다. 이것을 link A link B link C 라고 해보자. 그러면 우선 link A를 쭉 훑는다. 만약에 link A에 해당하는 css안에 h1 태그에 노란색으로 적용하라는 css가 있으면 노란색으로 적용이 된다. link B를 다음으로 훑을때 h1 태그에 빨간색을 적용하라면 빨간색이 적용된다. 다음으로 link C를 훑을때 h1 태그에 초록색을 적용하라고 했다가 마지막에 가서 h1 태그에 분홍색을 먹여달라고 명령이 되어있다면 최종적.. 2022. 11. 16.
css - fontfamily 사용방법 짧더라도 유용한 부분이라 남기고 넘어가려고한다. css 먹일때 font-family라고 사용되는 부분이 있다. 해당 font-family에 사용되는 폰트들은 https://www.cssfontstack.com/ CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code. Join to access discussion forums and premium features of the site. www.cssfontstack.com 여기서 보면 된다. 그리고 사용시 font-family: Afont 이렇게만 먹여놓으면 확인하는 컴퓨터에서 Afont가 없을 경우에 가장 기본 폰트로 보여지게 된다. 이를 방지하기 위해서 font-family: Afont.. 2022. 11. 14.
CSS 문제풀이5 - padding, border, margin 개념과 기초활용 # 문제 코딩 연습 확인사항: CSS - Box모델 임무: Box 모델을 사용하여 5px 너비의 녹색 테두리가 가지며, 중앙 정렬된 단어 "CENTRAL"이 포함된 박스를 만드세요. 박스는 모든 페이지 테두리까지 (더 정확하게는 div 요소까지), 50픽셀의 거리를 가져야 합니다. 평소와 같이 HTML 헤더도 만드세요. CSS 파일을 추가하는 것을 잊지 마세요. 중요 참고 사항: 위의 임무를 주의 깊게 읽어주세요! 자동화된 코딩 연습 평가 시스템은 정확하게 일치하는 것이 요구되기 때문에 정확하게 동일해야 합니다! 이에 대한 해답은 다음 강의에 있습니다. # 주요 개념 content - padding - border - margin 순으로 내핵에서 외핵으로 가는 느낌으로 생각하면 된다. # 내 코드 # 이.. 2022. 9. 28.
CSS 문제풀이4 - 폰트, 텍스트 (font, text) # 문제 코딩 연습 확인사항: CSS - 폰트와 텍스트 임무: 모든 h1 헤딩이 Arial폰트를 사용하고, 모든 단락의 폰트 크기가 1이 되도록 "styling.css"를 채우세요. 또한 폰트 크기를 0.5로 줄이는 small이라는 id를 만드세요. "index.html"을 채우세요. 여기에는 최소한 하나의 h1 헤딩, 하나의 단락 및 small을 적용하는 텍스트가 포함되어야 합니다.(div 컨테이너를 사용하세요) 평소와 같이 HTML 헤더도 만드세요. CSS 파일을 추가하는 것을 잊지 마세요. 중요 참고 사항: 위의 임무를 주의 깊게 읽어주세요! 자동화된 코딩 연습 평가 시스템은 정확하게 일치하는 것이 요구되기 때문에 정확하게 동일해야 합니다! 이에 대한 해답은 다음 강의에 있습니다. # 내 코드 # .. 2022. 9. 28.