본문 바로가기

분류 전체보기

(226)
Box Model 요소는 내용(content), 패딩(padding), 테두리(border)로 이루어져 있습니다. Padding은 내용과 테두리 사이의 '여유 공간'입니다. 반면에 Margin은 요소 주위의 여백입니다. 즉, 테두리 밖의 공간인 셈이다. border 한 줄로 끝내기 가장 일반적인 방법은 border 속성으로 한 줄에 다 쓰는 것입니다. 이 방식을 사용하면 위, 아래, 왼쪽, 오른쪽 모두 같은 테두리가 생깁니다. 값을 쓰는 순서는 굵기, 스타일(실선, 점선 등), 색입니다. 2px이 굵기, solid가 점선 #4d9fff가 색깔입니다. -dotted: 얇은 점선, dashed는 굵은 점선
margin auto auto; 와 text-align: center; 비교 margin auto auto; 와 text-align: center; 의 차이점 1.text-align: center 이 정렬방법은 inline요소가 정렬이 되는 방식입니다. 정렬을 하실 경우엔 부모 block 요소를 가진 부분에 적용을 해주시면 됩니다. 왜 inline 요소에 직접 text-align: center를 했을 때 적용되지 않을까 그 이유를 생각해보면, inline 요소는 그 content의 넓이만큼만 공간을 차지하게 됩니다. 그러니 그 요소에 직접 text-align: center를 한다면 이미 딱 그 요소의 넓이만큼만 공간을 차지하고 있으니 거기다가 text-align을 적용해도 움직일 공간이 없는 것이다. 그래서 부모 block 요소에 적용을 하게 되는 것입니다. block요소는 기본..
나의 두번째 웹사이트 내가 만든 두 번째 홈페이지의 홈이다. 초록색 이름을 누르면 그 사람의 정보가 있는 홈페이지로 이동한다. 보라색 홈을 누르면 다시 홈페이지의 홈으로 이동한다. 박지성 홈페이지 류현진 홈페이지 손흥민 홈페이지 홈페이지 HTML 코드 충섭의 sportsstar example 내가 좋아하는 스포츠 스타 홈 박지성 류현진 손흥민 이 홈페이지는 내가 2번째로 만든 홈페이지이다. 만들면서 부족한 부분들이 많다는 걸 깨달았다. 한달 뒤에는 더 멋지고 좋은 홈페이지를 만들것이다. CSS코드 h1{ text-align: center; color: grey; margin-top: 60px; margin-bottom: 90px; } #nice{ display: block; text-align: center; } #nice ..
텍스트 스타일링 폰트 굵기 설정 폰트 굵기를 설정하기 위해서는 font -weight 속성을 사용하면 됩니다. 사용 가능한 값은 얇은 순서로 100, 200, 300, 400, 500, 600, 700, 800, 900입니다. 100이 가장 얇고, 900이 가장 굵다는 뜻이죠. 텍스트 정렬 text-align 속성을 사용하면 텍스트를 왼쪽, 오른쪽, 또는 가운데로 정렬할 수 있습니다. 텍스트 밑줄 text-decoration을 사용하면 텍스트를 몇 가지 방법으로 꾸밀 수 있습니다. Underline : underline 값을 사용하면 밑줄이 그어집니다. Orerline : overline 값을 사용하면 글 위에 줄이 그어집니다. Line-through : line-through 값을 사용하면 줄이 글을 관통합니다. no..
텍스트 색 정리 CSS에서 색을 표현하는 방식이 세 가지가 있습니다. 색이름 CSS에서 정해준 색 이름 중 하나를 쓰는 방법이 있습니다. 모든 색이 있지는 않지만, 무려 140개의 색이 대부분 브라우저에서 지원된다고 하네요! RGB 값 모든 색은 빨강(Red), 초록(Green), 파랑(Blue)의 조화로 표현할 수 있습니다. 이 표현 방식이 바로 'RGB'입니다. https://htmlcolorcodes.com/color-picker/ 이런 사이트에서 원하는 색을 찾을 수 있습니다. HEX 값 (16진법) HEX 값은 단순히 RGB 값을 16진법으로 표현한 방식입니다. 83은 16진법으로 53이고, 237는 16진법으로 ED이고, 65는 16진법으로 41입니다. 따라서 rgb(83, 237, 65)는 #53ED41과 ..
코멘트 코멘트는 사실 브라우저가 무시하기 때문에 실제 결과물인 사이트에 반영이 되지 않습니다. 하지만 복잡한 부분들을 설명함으로써 지저분해 보일 수 있는 코드를 정리해주는 중요한 역할을 합니다. HTML 코멘트 의 형태로 되어 있는 부분이 HTML의 '코멘트(comment)'입니다 css 코멘트 /* 내용 */의 형태로 되어 있는 부분이 HTML의 '코멘트(comment)'입니다. 원하는 줄을 코멘트하고 싶은 경우에 그 줄을 잡고 Ctrl + / 를 누르면 코멘트가 됩니다. 다시 한번 더 누르면 취소가 됩니다.
백준 파이썬 문제 2935 - 소음 문제 수업 시간에 떠드는 두 학생이 있다. 두 학생은 수업에 집중하는 대신에 글로벌 경제 위기에 대해서 토론하고 있었다. 토론이 점점 과열되면서 두 학생은 목소리를 높였고, 결국 선생님은 크게 분노하였다. 이렇게 학생들이 수업 시간에 떠드는 문제는 어떻게 해결해야 할까? 얼마전에 초등학교 선생님으로 취직한 상근이는 이 문제를 수학 문제로 해결한다. 학생들을 진정시키기 위해 칠판에 수학 문제를 써주고, 아이들에게 조용히 이 문제를 풀게 한다. 학생들이 문제를 금방 풀고 다시 떠드는 것을 방지하기 위해서, 숫자를 매우 크게 한다. 아직 초등학교이기 때문에, 학생들은 덧셈과 곱셈만 배웠다. 또, 아직 10의 제곱꼴을 제외한 다른 수는 학교에서 배우지 않았기 때문에, 선생님이 써주는 수는 모두 10의 제곱 형태..
백준 파이썬문제 5335번 - 화성수학 문제 겨울 방학에 달에 다녀온 상근이는 여름 방학 때는 화성에 갔다 올 예정이다. 화성에서는 지구와는 조금 다른 연산자 @, %, #을 사용한다. @는 3을 곱하고, %는 5를 더하며, #는 7을 빼는 연산자이다. 따라서, 화성에서는 수학 식의 가장 앞에 수가 하나 있고, 그 다음에는 연산자가 있다. 입력 첫째 줄에 테스트 케이스의 개수 T가 주어진다. 다음 줄에는 화성 수학식이 한 줄에 하나씩 주어진다. 입력으로 주어지는 수는 정수이거나 소수 첫째 자리까지 주어지며, 0 이상 100 이하이다. 연산자는 최대 3개 주어진다. 출력 각 테스트 케이스에 대해서, 화성 수학식의 결과를 계산한 다음에, 소수점 둘째 자리까지 출력한다. 실행창 소스코드 def calc(num, sub): if sub == "@":..