본문 바로가기

전체 글126

웹 문서의 레이아웃 만들기 배치 방법을 결정하는 display 속성 종류 설명 block 인라인 레벨 요소를 블록 레벨 요소로 바꿈 (여러 줄->한 줄) inline 블록 레벨 요소를 인라인 레벨 요소로 바꿈 inline-block 인라인과 블록 레벨 요소의 속성을 모두 가지고 마진과 패딩을 지정할 수 있다. none 해당 요소를 화면에 표시하지 않는다 menu1 menu2 menu3 menu4 li를 display : inline-block으로 지정하여 가로 배치를 해준다. * display: inline-block과 float: left 속성의 차이점 display: inline-block은 기본 패딩과 마진 값을 가지고 있지만 float: left는 기본 패딩과 마진을 가지고 있지 않아서 필요에 따라 지정해야 되고 float.. 2024. 2. 22.
CSS와 박스 모델 블록 레벨 요소 혼자 한 줄을 차지하는 것이다. 한 줄을 차지한다는 것은 해당 요소의 너비가 100%라는 뜻이다. 따라서 블록 레벨 요소의 왼쪽이나 오른쪽에 다른 요소가 올 수 없다. ex) div, span, p 인라인 레벨 요소 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소가 올 수 있다. 즉 한 줄에 인라인 레벨 요소를 어러 개 표시할 수 있다. ex) span, img, strong 박스 모델의 기본 구성 콘텐츠 영역(contend) 패팅 영역(padding) : 콘텍츠 영역과 테두리 영역 사이의 여백 테두리(border) : 박스의 테두리 마진(margin) : 박스 모델 사이의 여백 * 마진과 패팅은 상하좌우 여백을 조정할 수 있다. 사진 첨부 padding 테두리와 콘텐츠 영역간의 .. 2024. 2. 22.
[ 프로그래머스 ] 꼬리 문자열 문제 풀이 Arrays 메소드를 사용해서 풀어봤다. ① filter()를 이용해 ex가 포함되지 않은 문자열만 추출한다. ② reduce()를 이용해 filter로 뽑아낸 값을 하나의 문자열로 바꾼다. reduce() .reduce()는 스트림 요소를 하나의 값으로 줄이는 연산을 수행하는 메소드다. .reduce( 초기값, (acc(누적변수) + 값) -> (acc+값)); 즉 문제에서는 초기값을 ""로 지정한 후 i의 각 문자열을 누적하여 합친다. 결과 2024. 2. 19.
[ 프로그래머스 ] 글자 이어 붙이기 문제 풀이 answer에다가 my_string에 해당하는 index_list의 번지를 더해준다. 이때 my_string의 인덱스로 접근하므로 .charAt() 메소드를 이용해준다. 결과 class Solution { public String solution(String my_string, int[] index_list) { String answer = ""; for(int i=0; i 2024. 2. 19.

티스토리툴바